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"]';

我的问题是:如何在jQuery中选择所有的div?

我试过这样做:

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

但是没有成功。如何选择选中的所有年份?

Answer 1

你的代码有两个问题:

1. 元素具有data-year属性，但在变量中使用data-years选择器。
2. 您使用.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>