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:
In this article, we will see how to create a custom login page in django. how to allow user registration, login, an...
May-14-2022
In this tutorial, I will guide you through the process of adding a date range picker component to your Angular 15 applic...
Jun-30-2023
In this article, we will see how to install angular in ubuntu. Angular is a framework, library, assets, a...
May-09-2022
In this example we will see laravel 8 group by query example. how to use group by in laravel 8. As you might expect...
Nov-29-2021