133

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?

Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
  • 2
    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 04 '14 at 02:49
  • See also http://stackoverflow.com/q/4191386/292060 – goodeye Jan 07 '15 at 04:46

5 Answers5

285

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.

Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
  • 2
    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 '14 at 14:24
  • 1
    Wow! this solution is great! Had a problem for hours but this fixed it! –  Oct 20 '16 at 23:42
66

You can also use .filter()

$('.slide-link').filter('[data-slide="0"]').addClass('active');
Anton
  • 32,245
  • 5
  • 44
  • 54
10

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}]`);
Aleshanee
  • 119
  • 1
  • 4
3

you can also use andSelf() method to get wrapper DOM contain then find() can be work around as your idea

$(function() {
  $('.slide-link').andSelf().find('[data-slide="0"]').addClass('active');
})
.active {
  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>
Girish
  • 11,907
  • 3
  • 34
  • 51
0

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.

Codingwiz
  • 192
  • 2
  • 14