javascript - 存储在变量中后过滤列表项

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')