How To Get Element By Data Attribute In jQuery

Websolutionstuff | Jul-11-2022 | Categories : jQuery

In this article, we'll learn how to locate elements using data-attribute values. We can do this using jQuery and CSS attribute selectors. These selectors help us pick out HTML elements based on the values in their data attributes.

In simple terms, we're going to explore how to use jQuery to find elements based on their data attributes. This knowledge will come in handy for various web development tasks, so let's dive into how to achieve it.

Example: How To Get Element By Data Attribute In jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Get Element By Data Attribute In jQuery - Websolutionstuff</title>
<style>
    ul li { 
        float: left;
        margin: 10px;
        list-style: none;
    }
    ul li img.selected{
        outline: 5px solid black;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){

        var slide = $(this).children("option:selected").val();
                
        $(".slides img").removeClass("selected");
                
        $('.slides img[data-slide=' + slide + ']').addClass("selected");
    });    
});
</script>
</head>
<body>
    <label>Slide</label>
    <select>
        <option>select</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <hr>
    <ul class="slides">
        <li>
            <img src="images/laravel.jpg" alt="Laravel" data-slide="1">
        </li>
        <li>
            <img src="images/jquery.jpg" alt="jQuery" data-slide="2">
        </li>
        <li>
            <img src="images/php.jpg" alt="PHP" data-slide="3">
        </li>
        <li>
            <img src="images/html.jpg" alt="HTML" data-slide="4">
        </li>
    </ul>
</body>
</html>

 

Conclusion:

In conclusion, we've gained the valuable skill of finding and manipulating elements in our web development projects based on their data attributes. With the power of jQuery and CSS attribute selectors, we can easily locate and work with specific elements that have the data attributes we need.

 


You might also like:

Recommended Post
Featured Post
How To Create List And Grid View Using JavaScript
How To Create List And Grid Vi...

In this article, we will see how to create a list and grid view using javascript. many times clients have requirements l...

Read More

Dec-23-2020

Laravel 8 Form Validation Example
Laravel 8 Form Validation Exam...

In this article, we will see the laravel 8 form validation example. form validation in laravel is a very common fun...

Read More

Oct-10-2020

How To Generate PDF and Send Email In Laravel 8
How To Generate PDF and Send E...

In this tutorial we will see how to generate pdf and send email in laravel 8. For generating PDF file we will use l...

Read More

Dec-20-2021

How To Create Pie Chart In Laravel 9 Using Highcharts
How To Create Pie Chart In Lar...

In this article, we will see how to create a pie chart in laravel 9 using highcharts. A pie chart is a circular statisti...

Read More

Oct-05-2022