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">
<title>How To Get Element By Data Attribute In jQuery - Websolutionstuff</title>
    ul li { 
        float: left;
        margin: 10px;
        list-style: none;
    ul li img.selected{
        outline: 5px solid black;
<script src=""></script>

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


You might also like:

Recommended Post
Featured Post

Follow us
facebooklogo github instagram twitter