jQuery find element by data attribute value

Question

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?

Wilcher

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'); – Counterscarp

See also https://mcmap.net/q/45570/-jquery-how-to-find-an-element-based-on-a-data-attribute-value/292060 – Broyles

Answer 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.

Aeon

My bad. I had tried that but in the wrong place (before adding my elements dynamically...). Anyway thanks for the effort! Works fine. – Wilcher

Wow! this solution is great! Had a problem for hours but this fixed it! – Pacer

Answer 2

You can also use .filter()

$('.slide-link').filter('[data-slide="0"]').addClass('active');

Scipio

Answer 3

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}]`);

Perished

Answer 4

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>

Paction

Answer 5

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.

Gratin