How To Get Element By Data Attribute In jQuery

Websolutionstuff | Jul-11-2022 | Categories : jQuery

In this article, we will see how to find elements based on data-attribute value. You can use the CSS attribute selectors to find an HTML element based on its data-attribute value using jQuery. The selector is used to select elements with a specified attribute. We can use the CSS Attribute selector to get the element.

So, let's see jquery find data attribute value, and jquery get element by attribute.

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>

 


You might also like:

Recommended Post
Featured Post
How To Create Custom Login Page In Django
How To Create Custom Login Pag...

In this article, we will see how to create a custom login page in django. how to allow user registration, login, an...

Read More

May-14-2022

How To Add Date Range Picker In Angular 15 Material
How To Add Date Range Picker I...

In this tutorial, I will guide you through the process of adding a date range picker component to your Angular 15 applic...

Read More

Jun-30-2023

How To Install Angular In Ubuntu
How To Install Angular In Ubun...

In this article, we will see how to install angular in ubuntu. Angular is a framework, library, assets, a...

Read More

May-09-2022

Laravel 8 Group By Query Example
Laravel 8 Group By Query Examp...

In this example we will see laravel 8 group by query example. how to use group by in laravel 8. As you might expect...

Read More

Nov-29-2021