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
CRUD Operation In PHP
CRUD Operation In PHP

In this tutorial, I will show you how to create a CRUD operation with login-logout in PHP. So, if you are a newcomer in...

Read More

Jul-20-2020

Image Upload in Summernote Editor Using Laravel
Image Upload in Summernote Edi...

In this post we will see how to upload image in summernote editor. there are many editor available in laravel...

Read More

Jul-09-2021

Laravel 10 Multiple Image Upload Example
Laravel 10 Multiple Image Uplo...

In this article, we will see laravel 10 multiple image examples. Here, we will learn about how to upload multiple i...

Read More

Mar-17-2023

Laravel 9 Form Class Not Found
Laravel 9 Form Class Not Found

In this article, we will fix the laravel 9 form class not found error, many times we have received errors like lara...

Read More

Sep-19-2022