0

すべての<li>要素を非表示にしてから、入力/検索フィールドの値に一致するテキスト<li>を持つ子を含むのみを表示しようとしています。<p>

HTML:

<input id="search" type="text" placeholder="Search">

<ul class="items">

    <li class="item">
        <p class="keywords" style="display: none;">skins, hair</p>//keywords
        <a class="thumb" href="#"><img src="koalahat.jpg"></a>
    </li>

    <li class="item">
        <p class="keywords" style="display: none;">hair</p>
        <a class="thumb" href="#"><img src="goosehat.jpg"></a>
    </li>

</ul>


JS:

$('#search').keyup(function(){
    var typed = $(this).val(); //get the input field value
    $('.items li').hide() //hide all LIs...
    $('.items li').filter(function(){ //filter all LIs that...
        $('.items li p.keywords:contains(typed)').parent().show(); //... that contain the typed keywords, and show them.
    });
    console.log(typed);
})

$('.items li p.keywords:contains(typed)')に変更すると$('.items li p.keywords:contains("skins")')目的の出力が返される理由がわかりませんが、前者はそうではありません。

4

1 に答える 1