How to Add a Class to an Element Based on its Data Attribute Value Using jQuery?

jQuery: Find Element by Data Attribute Value

In HTML markup, elements can have custom data attributes assigned to them using the data-* attribute syntax. These attributes are commonly used to store additional information that can be accessed or manipulated by JavaScript code.

One common use case is to add a specific class to an element based on the value of its data attribute. For instance, consider the following HTML elements:

<pre><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>
</pre>

Our goal is to add an "active" class to the element with the data-slide attribute value of 0 (zero).

Attribute Equals Selector

jQuery provides an attribute equals selector that allows us to select elements based on the exact value of a specific attribute. To achieve our goal, we can use the following code:

<pre>$('.slide-link[data-slide="0"]').addClass('active');
</pre>

This code selects the element with the class "slide-link" and data-slide attribute equal to "0". It then adds the "active" class to it.

Understanding .find()

The .find() method, which was used in the initial attempt, works by traversing the DOM tree. However, in this case, we want to select the element based on its data attribute, not on its descendants. Hence, using the attribute equals selector is more appropriate for this task.

The above is the detailed content of How to Add a Class to an Element Based on its Data Attribute Value Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!