Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

<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?
                To explain things a little here, the reason why this doesn't work is because you are trying to find the descendants of .slide-link with the attribute of [data-slide="0"].  Since something cannot be a descendant of itself, it doesn't have anything to return.  However, if you had a wrapper around these links, then this would have worked: $('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');
– user256430
                Oct 4, 2014 at 2:49
                My bad. I had tried that but in the wrong place (before adding my elements dynamically...). Anyway thanks for the effort! Works fine.
– MrUpsidown
                Feb 13, 2014 at 14:24
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}]`);
  background: green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
When looking to return multiple elements with different data attribute and different data attribute value were both ARE NOT always present
<p class='my-class' data-attribute1='1'></p>
<p class='my-class' data-attribute2='2'></p>
// data-attribute1 OR data-attribute2
$(".my-class").filter(`[data-attribute1="${firstID}"],[data-attribute2="${secondID}"]`);
When looking to return multiple elements with different data attribute and different data attribute value were both ARE always present
<p class='my-class' data-attribute1='1' data-attribute2='1'></p>
<p class='my-class' data-attribute1='1' data-attribute2='2'></p>
// data-attribute1 AND data-attribute2
$(".my-class").filter(`[data-attribute1="${firstID}"][data-attribute2="${secondID}"]`);
The placement of the comma is crucial to differentiate between finding with OR or an AND argument.
It also works for elements who have the same data attribute but with different attribute value
$(".my-class").filter(`[data-attribute1="${firstID}"],[data-attribute1="${secondID}"]`);
I was inspired by this post of @omarjebari on stackoverflow.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.