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 Upload Image to Storage Folder in Laravel 10
How to Upload Image to Storage...

As I delve into Laravel 10, a true powerhouse in the realm of PHP frameworks, I've found it to be a game-changer for...

Read More

Sep-29-2023

Laravel 9 CRUD Operation Example
Laravel 9 CRUD Operation Examp...

As we know Laravel 9 was officially released yesterday with many new functionalities like Symfony 6.0 components, Symfon...

Read More

Feb-10-2022

How To Create Dark and Light Mode Website using jQuery
How To Create Dark and Light M...

In this article, we will see how to create a dark and light mode website using jquery. As you can see many websites and...

Read More

Nov-21-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