javascript - Jquery按孩子过滤列表

Question

我对 Jquery 很陌生'我正在尝试使用子类而不是列表内容来过滤有序列表。在这种情况下，我需要按类“标题”而不是完整的“li”内容进行过滤。这可以用js实现吗？谢谢。

<ol data-filter="true">
    <li>
    <div class="title">Andy</>
    Age:9
    Class:5
    Hobby: Sketching
    Food: Chicken
    Allergies: NONE
    </li>
    <li>...</li>
</ol>

Answer 1

您应该能够遍历 li 元素并删除或隐藏它们。

function filterByTitle(listID, title) {
    $("#" + listID + " li").each(function() {
        if ($(this).find(".title").html() != title)
           $(this).remove(); //can use .hide() instead of .remove if desired
    });
}

在此处查看 jsFiddle：http: //jsfiddle.net/7KW66/

Answer 2

对于 HTML 示例：

 <ol>
     <li>
       <div class="title">Andy</div>
         Age:9
         Class:5
         Hobby: Sketching
         Food: Chicken
         Allergies: NONE
    </li>
    <li>
       <div class="title">Paul</div>
         Age:10
         Class:3
         Hobby: Sky Diving
         Food: Oranges
         Allergies: Dairy
    </li>
</ol>

您可以使用下面的 jQuery 来选择 Andy：

$(document).ready( function() {
    var selectedListItem = $('#myList .title:contains("Andy")').parents("li");
    selectedListItem.hide();
});

jsFiddle 示例：http: //jsfiddle.net/xgPYx/