Jquery按子级过滤列表

Question

我是Jquery的新手，我正在尝试使用子类而不是列表内容来过滤有序列表。在这种情况下，我需要按类"title“而不是完整的"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

对于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来选择安迪：

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

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

Answer 2

您应该能够遍历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/