javascript - jQuery - Use multiple data search selector

Question

I have some checkboxes, and I want to filter all my DOM elements according to these filters.

My HTML is like :

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

When I click my checkboxes (I can have several checkboxes checked), I build a string like :

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

My question is : how can I select all my div in jQuery ?

I tried something like :

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

But no success. How can I select all years checked ?

question from:https://stackoverflow.com/questions/65937646/jquery-use-multiple-data-search-selector

Answer 1

Your code has two problem:

1. The elements has data-year attribute but selector in variable used data-years.
2. You used .find() method that trying to find childs elements in selector but the selector ($("div")) hansn't any child.

So you need to use variable as selector like $(search) or use .filter() if you want to search on div tags only.

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>