Question

我试图将一些列表项存储到变量中，然后遍历变量并仅显示具有特定数据属性的列表项。值得一提的是，只需在页面上的li上使用简单的显示/隐藏就不适用于我正在做的事情。 https://jsfiddle.net/0jbnLv0k/

HTML：

<ul>
<li data-color="blue"></li>
<li data-color="red"></li>
<li data-color="green"></li>
<li data-color="blue"></li>
<li data-color="red"></li>
<li data-color="green"></li>
</ul>

<button class="blue">blue</button>
<button class="red">red</button>
<button class="yellow">yellow</button>

Jquery的：

 var items = $('ul li');
 items.remove();

 var result = $.grep(items, function(e){ return e.data == 'blue'; });
 $('ul').html('<li>' + result + '</li>');

Answer 1

问题在于

typeof e.data === 'undefined'

解决方案是：

var items = $('ul li');
items.remove();

var result = $.grep(items, function(e){ 
    return $(e).attr('data-color') == 'blue'; 
});
$('ul').append( result );

但这是显示DOM元素的非常糟糕的昂贵（耗时）方式。更好的是用

添加课程

display: none;

属性。

相反，所有这些代码只能使用一行：

$("li:not([data-color='blue'])").addClass('hide')

Answer 2

$("button").click(function() {
    var getClass = $(this).attr("class");
  $("ul").find("li").not("li[data-color="+getClass+"]").remove();
});

您可以使用not选择器删除除所选类之外的所有列表元素。 https://jsfiddle.net/0jbnLv0k/5/

存储在变量中后筛选列表项

2 个答案: