javascript - jQuery - 使用多数据搜索选择器

Question

我有一些复选框，我想根据这些过滤器过滤我所有的 DOM 元素。
我的 HTML 是这样的:

<div data-year="2018">....</div>
<div data-year="2018">...</div>
<div data-year="2019">...</div>

当我单击我的复选框时(我可以选中多个复选框)，我构建了一个字符串，如:

var search = '[data-years="2018"], [data-years="2019"], [data-years="2021"]';

我的问题是:如何选择我所有的 div在 jQuery 中？
我试过类似的东西:

var $div = $('div').find(search);

但没有成功。如何选择所有检查的年份？

Answer 1

您的代码有两个问题:

元素有 data-year属性但使用变量中的选择器 data-years .

您使用过 .find() 试图在选择器中查找子元素但选择器( $("div") )没有任何子元素的方法。

所以你需要使用变量作为选择器，如 $(search)或使用 .filter() 如果您只想搜索 div 标签。

var $div = $(search);
// Or search on divs only
var $div = $('div').filter(search);

var search = '[data-year="2018"], [data-year="2019"], [data-year="2021"]';
$(search).css("color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-year="2018">2018</div>
<div data-year="2018">2018</div>
<div data-year="2019">2019</div>
<div data-year="2020">2020</div>
<div data-year="2021">2021</div>