Jquery按子列表过滤列表

时间:2013-08-21 21:55:10

标签: javascript jquery class listview html-lists

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

2 个答案:

答案 0 :(得分:0)

对于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/

答案 1 :(得分:0)

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