jQuery find element by data attribute value
I have a few elements like below:
<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>
How can I add a class to the element which has a data-slide
attribute value of 0
(zero)?
I have tried many different solutions but nothing worked. An example:
$('.slide-link').find('[data-slide="0"]').addClass('active');
Any idea?
Solution 1:
Use Attribute Equals Selector
$('.slide-link[data-slide="0"]').addClass('active');
Fiddle Demo
.find()
it works down the tree
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Solution 2:
You can also use .filter()
$('.slide-link').filter('[data-slide="0"]').addClass('active');