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?
This question is related to
jquery
html
css
custom-data-attribute
$('.slide-link[data-slide="0"]').addClass('active');
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.
you can also use andSelf()
method to get wrapper DOM contain then find()
can be work around as your idea
$(function() {_x000D_
$('.slide-link').andSelf().find('[data-slide="0"]').addClass('active');_x000D_
})
_x000D_
.active {_x000D_
background: green;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<a class="slide-link" href="#" data-slide="0">1</a>_x000D_
<a class="slide-link" href="#" data-slide="1">2</a>_x000D_
<a class="slide-link" href="#" data-slide="2">3</a>
_x000D_
I searched for a the same solution with a variable instead of the String.
I hope i can help someone with my solution :)
var numb = "3";
$(`#myid[data-tab-id=${numb}]`);
You can also use .filter()
$('.slide-link').filter('[data-slide="0"]').addClass('active');
Source: Stackoverflow.com