В этой статье мы увидим, как находить элементы по значению data-attribute. Вы можете использовать селекторы атрибутов CSS, чтобы найти элемент HTML на основе его значения атрибута данных с помощью jQuery. Селектор используется для выбора элементов с указанным атрибутом. Мы можем использовать селектор CSS Attribute
, чтобы получить элемент.
Итак, давайте посмотрим, как jquery находит значение атрибута данных, а jquery получает элемент по атрибуту.
Пример: как получить элемент по атрибуту данных в 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>
Вам также может понравиться:
- Читайте также: Laravel 9 меняет размер изображения перед загрузкой
- Читайте также: Как заменить innerHTML в Div с помощью jQuery
- Читайте также: Как получить идентификатор элемента с помощью jQuery
- Читайте также: Как отключить даты после недели в jQuery Datepicker