Jquery按孩子过滤列表答案

【问题标题】：Jquery Filter list by childJquery按孩子过滤列表
【发布时间】：2013-08-21 21:55:10
【问题描述】：

我对 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>

【问题讨论】：

你如何定义“过滤器”？

标签： javascript jquery class listview html-lists

【解决方案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 来选择 Andy：

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

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

【讨论】：

【解决方案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/

【讨论】：