下のjsコードの $('<li class="list">').append(word);
という部分がどうしても理解できません。。。
リファレンスで.append();各要素に引数で指定したコンテンツを追加する。と合ったのですが、
そもそも'<li class="list">'という文字列に変数wordを追加したら、
'<li class="list">' + word(変数)という形になると思うのですが</li>の閉じタグはいらないのですか??
よく理解できてないようなので、どういう処理をしているのかを教えていただけると助かります。
html
1 <body> 2 <div class="form-group"> 3 <input type='text' id="keyword" class="form-control" placeholder="好きなフルーツを入力してください"> 4 <button type="button" id="submit" class="btn">検索</button> 5 </div> 6 <ul id="list"></ul> 7 </body>
js
1var fruits = ['apple', 'apricot', 'avocado', 'blueberry', 'cherry', 'coconut', 'cranberry', 'dragonfruit', 'durian', 'grape', 'grapefruit', 'guava', 'kiwi fruit', 'lemon', 'lime', 'lychee', 'mango', 'melon', 'watermelon', 'miracle fruit', 'orange', 'bloodorange','clementine','mandarine','tangerine','papaya','passionfruit','peach','pear','persimmon','physalis','plum/prune','pineapple','pomegranate','raspberry','rambutan','star fruit','strawberry']; 2 3$(function() { 4 var list = $("#list"); 5 6 function appendList(word) { 7 var item = $('<li class="list">').append(word); 8 list.append(item); 9 } 10 11 function editElement(element) { 12 var result = "^" + element; 13 return result; 14 } 15 16 $("#submit").on("click", function() { 17 var input = $("#keyword").val(); 18 var inputs = input.split(" "); //split() 文字列を複数の部分文字列に区切り、文字列の配列に分割する。 19 var newInputs = inputs.map(editElement); 20 var reg = RegExp(newInputs.join("|")); // AAA|BBB AAAとBBBにマッチする 21 22 $(".list").remove(); 23 24 $.each(fruits, function(i, fruit) { 25 if (fruit.match(reg)) { 26 appendList(fruit); 27 } 28 }); 29 30 if ($(".list").length === 0) { //class.length クラスの要素数を取得 31 appendList("一致する果物はありませんでした"); 32 } 33 }); 34});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/03 02:34
退会済みユーザー
2018/11/03 05:48