How to Find an Element by its data Attribute value using jQuery

HTML5 data attributes allow developers to add data to an element. Using data- as a prefix, you can add a data attribute to store some information within an element (any element). Now, how do you extract and use the data that are associated with the elements? Here, I’ll show how using a simple jQuery method, you can find elements by its “data” attribute value.

What is data attribute and how to use it?

If you have not used an HTML5 data attribute before, then you should read this.

The data attributes allow us to add some extra information to the elements on our web page, which we can use for processing.

Any element whose attribute has a prefix (or starts with) a data- (the word data, followed by a hyphen), is a data attribute. For example, I have a <div> element and I want to attach some basic information with it, using the data attribute.

<div class="emp" data-name="arun" data-empcode="cd001">
    some text here... 
</div>

I have two data attributes with the <div> element, namely, data-name and data-empcode. Each attribute has some value. Similarly, you can have multiple <div> elements, each having some unique data.

There are many ways you can extract the values associated with these (and many) data attributes. For example,

<div class="emp" data-name="arun" data-empcode="cd001">
    some text here... 
</div>

<script>
    var emp = document.getElementsByClassName("emp");

    var empName = emp[0].getAttribute("data-name");
    var empCode = emp[0].getAttribute("data-empcode");
    console.log(empName + ' ' + empCode);
</script>
Try it

Also Read: How to get all the Elements in a DIV with Specific text as ID using JavaScript

Find Elements by its data Attribute value using jQuery

Now, let’s see how using a simple jQuery method can we find all elements by its data attributes.

<!DOCTYPE html>
<html>
<head>
    <title>Find Element by data Attribute</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
        .activeBirds::after {
            color: red;
            content: "*";
        }
    </style>
</head>
<body>
    <p>Click the button to find which bird in the list is of type "sparrow".</p>
    <div>
        <div class="birds" data-bird-type="dove">
            Mourning Dove
        </div>
        <div class="birds" data-bird-type="sparrow">
            Abert's Towhee
        </div>
        <div class="birds" data-bird-type="sparrow">
            Cassin's Sparrow
        </div>
        <div class="birds" data-bird-type="hawk">
            Cooper's Hawk
        </div>
        <div class="birds" data-bird-type="hawk">
            Black Vulture
        </div>
        <div class="birds" data-bird-type="sparrow">
            Canyon Towhee
        </div>  
    </div>

    <p>
        <input type="button" id="bt" value="Click it!" />
    </p>
</body>
<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            // Change the value "sparrow" with "hawk" to find the hawks in the list. 
            $('.birds[data-bird-type="sparrow"]').addClass('activeBirds');
        });
    });
</script>
</html>
Try it


I have few <div> elements and each has a single data attribute named data-bird-type. The elements have a common class named birds. Different birds come under different category.

I want to find a specific type of bird (lets say the sparrow and there are many birds in this type) and change the class of every elements of type sparrow.

Inside the script, I am using the jQuery Attribute Equals Selector to search for elements with a specific attribute (in our case data-bird-type) and a specific value (in our case sparrow).

$('.birds[data-bird-type="sparrow"]')

Well, that’s it. Thanks for reading.

← Previous



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: