Jquery как найти элемент по data

I’ve got the following scenario:

var el = 'li';

and there are 5 <li>‘s on the page each with a data-slide=number attribute (number being 1,2,3,4,5 respectively).

I now need to find the currently active slide number which is mapped to var current = $('ul').data(current); and is updated on each slide change.

So far my tries have been unsuccessful, trying to construct the selector that would match the current slide:

$('ul').find(el+[data-slide=+current+]);

does not match/return anything…

The reason I can’t hardcode the li part is that this is a user accessible variable that can be changed to a different element if required, so it may not always be an li.

Any ideas on what I’m missing?

asked Nov 16, 2010 at 5:11

You have to inject the value of current into an Attribute Equals selector:

$("ul").find(`[data-slide='${current}']`)

For older JavaScript environments (ES5 and earlier):

$("ul").find("[data-slide='" + current + "']");

answered Nov 16, 2010 at 6:30

Frédéric HamidiFrédéric Hamidi

257k41 gold badges484 silver badges478 bronze badges

When searching with [data-x=…], watch out, it doesn’t work with jQuery.data(..) setter:

$('<b data-x="1">'  ).is('[data-x=1]') // this works
> true

$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false

$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true

You can use this instead:

$.fn.filterByData = function(prop, val) {
    return this.filter(
        function() { return $(this).data(prop)==val; }
    );
}

$('<b>').data('x', 1).filterByData('x', 1).length
> 1

answered Mar 27, 2013 at 3:59

psycho brmpsycho brm

7,4441 gold badge43 silver badges42 bronze badges

Without JQuery, ES6

document.querySelectorAll(`[data-slide='${CSS.escape(current)}']`);

I know the question is about JQuery, but readers may want a pure JS method.

answered Jun 4, 2018 at 20:50

rap-2-hrap-2-h

29.5k34 gold badges167 silver badges255 bronze badges

I improved upon psycho brm’s filterByData extension to jQuery.

Where the former extension searched on a key-value pair, with this extension you can additionally search for the presence of a data attribute, irrespective of its value.

(function ($) {

    $.fn.filterByData = function (prop, val) {
        var $self = this;
        if (typeof val === 'undefined') {
            return $self.filter(
                function () { return typeof $(this).data(prop) !== 'undefined'; }
            );
        }
        return $self.filter(
            function () { return $(this).data(prop) == val; }
        );
    };

})(window.jQuery);

Usage:

$('<b>').data('x', 1).filterByData('x', 1).length    // output: 1
$('<b>').data('x', 1).filterByData('x').length       // output: 1

Or the fiddle: http://jsfiddle.net/PTqmE/46/

answered Mar 5, 2014 at 21:21

bPratikbPratik

6,8744 gold badges36 silver badges67 bronze badges

I have faced the same issue while fetching elements using jQuery and data-* attribute.

so for your reference the shortest code is here:

This is my HTML Code:

<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>

This is my jQuery selector:

$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.

Matthew R.

4,3221 gold badge24 silver badges39 bronze badges

answered Oct 22, 2013 at 12:39

user1378423user1378423

5675 silver badges3 bronze badges

This selector $("ul [data-slide='" + current +"']"); will work for following structure:

<ul><li data-slide="item"></li></ul>

While this $("ul[data-slide='" + current +"']"); will work for:

<ul data-slide="item"><li></li></ul>

answered Sep 30, 2016 at 15:08

$("ul").find("li[data-slide='" + CSS.escape(current) + "']");

I hope this may work better

thanks

answered Jul 12, 2016 at 6:26

Going back to his original question, about how to make this work without knowing the element type in advance, the following does this:

$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");

Emil

7,20117 gold badges76 silver badges134 bronze badges

answered Nov 9, 2012 at 23:32

Источник

Find a Data Attribute Using jQuery .find() Method
Find a Data Attribute Using a CSS Attribute Selector
Find a Data Attribute Using the .filter() Method

To search for an element with a data attribute using jQuery, you can use the .find() method, the .filter() method, or a CSS attribute selector. This article teaches you how you can use them all using practical code examples.

Find a Data Attribute Using jQuery `.find()` Method

In jQuery, the .find() method allows you to search for an element on a web page using a CSS selector. Here, you can use it to find a data attribute if you write the right CSS selector.

From this, you can do what you want with elements that match the CSS selector. In the example below, we searched for data-name=Edison and changed its font size to 3em.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>01-jQuery-find-data-attr</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
	<main>
		<ul>
			<li data-name="Edison">Thomas Edison</li>
			<li data-name="Einstein">Albert Einstein</li>
			<li data-name="Rutherford">Ernest Rutherford</li>
		</ul>
	</main>
	<script>
		$(document).ready(function() {
			$("ul").find("[data-name='Edison']").css('font-size', '3em');
		});
    </script>
</body>
</html>

Output:

Find a Data Attribute Using a CSS Attribute Selector

You can find a data attribute using a CSS attribute selector. But there are two ways to do this, depending on your HTML markup.

In the first example below, the list items have data attributes. So, you can use a CSS descendant selector, which consists of a tag selector and a CSS attribute selector.

The result is a pinpoint match of the required element, and you can apply CSS styles afterward.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>02-jQuery-find-data-attr</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<style>
		body {
			font-family: "Trebuchet MS", Verdana, sans-serif;
			font-size: 1.2em;
		}
	</style>
</head>
<body>
	<main>
		<ul>
			<li data-iso="MRT">Mauritania</li>
			<li data-iso="LUX">Luxembourg</li>
			<li data-iso="HRV">Croatia</li>
		</ul>
	</main>
	<script>
		$(document).ready(function() {
			$("ul [data-iso='MRT'").css('color', 'magenta');
		});
    </script>
</body>
</html>

Output:

The second example below has a different HTML and jQuery code. First, the parent <ul> element has the data attribute in the HTML.

This means the previous selector in the last example will not work. To solve this, you can remove the space between the <ul> element and the CSS attribute selector.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>02_01-jQuery-find-data-attr</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
	<main>
		<ul data-viruses="computer-viruses">
			<li>Mydoom</li>
			<li>ILOVEYOU</li>
			<li>WannaCry</li>
		</ul>
	</main>
	<script>
		$(document).ready(function() {
			$("ul[data-viruses='computer-viruses']").css('font-style', 'italic');
		});
    </script>
</body>
</html>

Output:

Find a Data Attribute Using the `.filter()` Method

The .filter() method will match an HTML element using a CSS selector. With this, you can pass the CSS selector of an element and work with the result.

That’s what we’ve done in the code example below. Unlike previous examples, we add a CSS class using the jQuery .addClass() method.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>03-jQuery-find-data-attr</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<style>
		.style-chef {
			background-color: #1a1a1a;
			color: #ffffff;
			padding: 0.2em;
			width: 40%;
		}
	</style>
</head>
<body>
	<main>
		<ul>
			<li data-esolang="Befunge">Befunge</li>
			<li data-esolang="Chef">Chef</li>
			<li data-esolang="Whitespace">Whitespace</li>
		</ul>
	</main>
	<script>
		$(document).ready(function() {
			$("li").filter('[data-esolang="Chef"]').addClass('style-chef');
		});
    </script>
</body>
</html>

Output:

Источник

For Single Test Input Div on page,
Firstly, get data attribute string and break into array with the help of split function.

attrName = 'data-party-registration-source-type-id';

dataArray = $('['+attrName+']').attr(attrName).split(",");

Then, trim array value to remove any white space and praseInt to convert character into int.

 trimmedDataArray = $.map(dataArray, function(value) {
  return parseInt(value.trim());
 });

testVal = 3;
isExist = $.inArray( testVal, trimmedDataArray );

If, “isExist” = -1 (not found)
Else, (found)

For Multiple Test Input Div on page,

Use above code in with each function

attrName = 'data-party-registration-source-type-id';
testValArray = [3,4,5,6];
$('['+attrName+']').each(function(index){
     dataArray = '';
     dataArray = $(this).attr(attrName).split(",");
      trimmedDataArray = $.map(dataArray, function(value) {
         return parseInt(value.trim()); // for words use, return value.trim();
      });

     testVal = testValArray[index];
     isExist = $.inArray( testVal, trimmedDataArray );
     //your code

});

Источник

В этой статье рассмотрим одну из наиболее мощных и часто используемых возможностей функции jQuery: выбор элементов DOM посредством селектора.

Введение

Строительство полнофункциональных сайтов и веб-приложений невозможно без манипулирования элементами DOM из которых состоят страницы. Но, прежде чем ими манипулировать, их необходимо сначала получить.

К счастью, библиотека jQuery обеспечивает достаточно мощный способ выбора элементов, основанный на селекторах. Заключается он в том, что для получения набора элементов достаточно просто передать селектор в функцию jQuery:

// selector – это селектор
jQuery('selector');
// или с помощью псевдонима $
$('selector')

Селектор – это шаблон для поиска элементов. Синтаксис селекторов в jQuery соответствует синтаксису CSS, который дополнен некоторыми нестандартными методами.

В качестве результата данная функция возвращает набор найденных элементов в формате объекта jQuery.

// $elements – переменная, в которой находится объект jQuery, содержащий все найденные элементы
var $elements = $('selector')

Узнать количество выбранных элементов можно с помощью свойства length:

// $anchors - переменная, содержащая все найденные элементы <a> на странице
var $anchors = $('a');
// количество найденных элементов
var length = $anchors.length;

Если length возвращает 0, то значит, что объект jQuery «пустой», т.е. он не содержит искомых элементов (они не были найдены).

При этом функция jQuery('selector') и «родные» JavaScript-методы для поиска элементов (querySelector, querySelectorAll и др.) возвращают совсем разные вещи.

«Родные» методы возвращают DOM-элемент или HTML-коллекцию элементов, а функция jQuery – объект jQuery.

Это означает, что вы не можете напрямую применить какие-либо «родные» свойства и методы JavaScript для работы с элементами к объекту jQuery. И наоборот, применить свойства и методы jQuery непосредственно к DOM-элементам.

Например, с помощью jQuery получим элемент <body> и изменим ему цвет фона:

// выберем элемент <body>
var $body = $('body');
// установим цвета фону элемента с помощью jQuery-метода css
$body.css('background-color', '#eee');

На чистом JavaScript эти действия записываются так:

// выберем элемента <body>
var bodyElem = document.querySelector('body');
// установим стили элементу, используя нативные свойства JavaScript
bodyElem.style.backgroundColor = '#eee';

Но, чтобы применить родные свойства и методы JavaScript к элементу, обёрнутому в объект jQuery, необходимо в этом случае обратиться непосредственно к этому элементу:

var $body = $('body');
// получим сам элемент
var bodyElem = $body[0];
if (bodyElem) {
  // установим стили на чистом JavaScript
  bodyElem.style.backgroundColor = '#eee';
}

Также, если вы хотите использовать свойства и методы jQuery для DOM-элементов их следует обернуть в объект jQuery. Выполняется это следующим образом:

var bodyElem = document.querySelector('body');
// обернём $bodyElem в объект jQuery
var $body = $(bodyElem);
// установим стили с помощью jQuery-метода css
$body.css('background-color', '#eee');

Базовые селекторы

Основные CSS селекторы, которые используются для выборки элементов в jQuery:

$('.class') – по классу;
$('#id') – по id;
$('tag') – по тегу;
$('*') – все элементы;
$('selector1,selector2,...') – по группе селекторов (выбирает все элементы, соответствующие хотя бы одному из указанных селекторов);
$('selector1selector2...') – по комбинации селекторов (выбирает элементы, которые должны соответствовать всем указанным селекторам).

Примеры

1. Найдём все элементы с классом btn:

var elements = $('.btn');

2. Выберем элемент с id="carousel":

var element = $('#carousel');

3. Выполним поиск всех элементов с тегом <a>:

var elements = $('a');

4. Выберем все элементы на странице:

var elements = $('*');

5. Выполним поиск элементов с классом nav или menu:

var elements = $('.nav,.menu');

6. Найдём элементы с тегом <nav> и классом menu:

// nav - селектор для выбора элементов по тегу <nav>
// .menu - селектор для выбора элементов с классом menu
var navs = $('nav.menu');

Селекторы атрибутов

CSS селекторы для идентификации элементов по их атрибутам::

[attr] – по атрибуту независимо от его значения;
[attr=value] – по атрибуту со значением, точно равным заданному;
[attr^=value] – по атрибуту со значением, начинающимся точно с заданной строки;
[attr|=value] – по атрибуту со значением, равным заданной строке или начинающимся с этой строки, за которой следует дефис (-);
[attr$=value] – по атрибуту со значением, оканчивающимся точно на заданную строку (при сравнении учитывается регистр);
[attr*=value] – по атрибуту со значением, содержащим заданную подстроку;
[attr~=value] – по атрибуту со значением, содержащим заданное слово, отделённое пробелами;
[attr!=value] – выбирает элементы, которые не содержат указанного атрибута, либо имеют указанный атрибут, но не с заданным значением.

Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:

$('a[rel="nofollow"]') – двойные кавычки внутри одинарных кавычек;
$("[rel='nofollow']") – одинарные кавычки внутри двойных кавычек;
$('a[rel='nofollow']') – экранированные одинарные кавычки внутри одинарных кавычек;
$("a[rel="nofollow"]") – экранированные двойные кавычки внутри двойных кавычек;

Селектор [attr!="value"] не является стандартным CSS селектором. Это расширение jQuery. При его использовании снижается производительность, поэтому в выборке не рекомендуется его использовать. Вместо него предпочтительнее использовать следующую конструкцию:

$('selector').not('[attr="value"]')

Примеры

1. Выберем изображения <img> с атрибутом alt:

<img src="photo-1.jpg" alt="">
<img src="photo-2.jpg" alt="Фото">
<img src="photo-3.jpg">

<script>
  // используем селектор [attr]
  var $elements = $('img[alt]');
</script>

2. Найдём элементы с атрибутом type="button":

<input type="button" value="Рассчитать стоимость заказа">
<button type="button">Информация о заказе</button>
<input type="submit" value="Отправить заказ">

<script>
  // используем селектор [attr=value]
  var elements = $('[type="button"]');
</script>

3. Выполним поиск <а> с классом btn и атрибутом href начинающимся со строки «http:».

<a class="btn btn-default" href="http://itchief.ru">...</a>
<a href="http://jquery.com/">...</a>
<a class="btn" href="my1.html">...</a>

<script>
  // используем селектор [attr^=value]
  var elements = $('a.btn[href^="http:"]');
</script>

4. Выполним поиск всех <div> с атрибутом data-name, имеющим значение, равное alert или начинающимся с alert, за которым следует дефис:

<div data-name="alert">...</div>
<p data-name="alert">...</p>
<div data-name="alert-warning">...</div>
<div data-name="warning">...</div>

<script>
  // используем селектор [attr|=value]
  var elements = $('div[data-name|="alert"]');
</script>

5. Найдём все элементы с атрибутом href, имеющие значения точно оканчивающиеся на строку «.zip»:

<a href="downloads/archive.zip">...</a>
<a href="#">...</a>
<div>...</div>

<script>
  // используем селектор [attr$=value]
  var elements = $('[href$=".zip"]');
</script>

6. Найдём все элементы с атрибутом href, содержащим подстроку «youtube»:

<a href="http://www.youtube.com/">...</a>
<a href="#">...</a>
<div>...</div>

<script>
  // используем селектор [attr*=value]
  var elements = $('[href*="youtube"]');
</script>

7. Выполним поиск <а> с атрибутом data-target, значение которого содержит «btn», отделённое от других пробелами:

<a href="#" data-target="btn btn-default">...</a><!-- да -->
<a href="#" data-target="btn" >...</a> <!-- да -->
<button type="submit" data-target="btn btn-default">Отправить</button> <!-- нет -->
<a href="#">...</a> <!-- нет -->
<a href="#" class="btn-default">...</a> <!-- нет -->

<script>
  // используем селектор [attr~=value]
  var elements = $('a[data-target~="btn"]');
</script>

8. Выберем <a>, которые не содержат атрибут rel, либо имеют его, но не с значением nofollow:

<a href="#" rel="nofollow">...</a>
<a href="#" rel="nofollow next">...</a>
<a href="#">...</a>
<a href="#" rel="next">...</a>
<p>...</p>

<script>
  // используем селектор [attr!=value]
  var elements = $('a[rel!="nofollow"]');
  // но лучше так
  // $('a').not('[rel!="nofollow"]')
</script>

9. Выберем <a>, имеющий следующие атрибуты: id, href, начинающий со строки «http:» и class, содержащим слово btn, отделённое пробелами:

<a id="intro" class="btn btn-default" href="http://getbootstrap.com/">...</a>
<a class="btn btn-success" href="http://itchief.ru/">...</a>
<a href="index.html">...</a>

<script>
  // используем комбинацию селекторов $('selector1selector2...')
  var elements = $('a[id][href^="http:"][class~="btn"]');
</script>

Селекторы отношений

В документы каждый элемент связан определёнными отношениями с другими элементами.

В CSS имеется 4 селектора отношений (A и B – это селекторы):

A>B – выбирает элементы B, расположенные непосредственно в A;
A B – выбирает элементы B, расположенные в A;
A+B – выбирает элементы B, каждый из которых расположен сразу же после A (при этом данные элементы должны являться детьми одного родителя, т.е. находиться на одном уровне вложенности);
A~B – выбирает все элементы B, каждые из которых расположены после A (при этом данные элементы должны являться детьми одного родителя, т.е. находиться на одном уровне вложенности).

Примеры

1. Найдём все <p>, расположенные в <article>:

<section>
  <p>...</p>
  <article>
    <h1>...</h1>
    <p>...</p> <!-- + -->
    <div>
      <p>...</p> <!-- + -->
    </div>
  </article>
  <aside>
    <p>...</p>
  </aside>
</section>

<script>
  var $elements = $('article p');
</script>

2. Выберем все <li>, расположенные непосредственно в #nav:

<ul id="nav">
  <li>...</li> <!-- + -->
  <li> <!-- + -->
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
  <li>...</li> <!-- + -->
</ul>

<script>
  var $elements = $('#nav>li');
</script>

3. Найдём все элементы .warning, расположенные сразу же после элементов .danger:

<section>
  <div class="warning">...</div>
  <div class="danger">...</div>
  <div class="warning">...</div> <!-- + -->
  <div class="danger">
    <div class="warning">...</div>
  </div>
  <div class="warning">...</div> <!-- + -->
</section>

<script>
  var $elements = $('.danger+.warning');
</script>

4. Выберем все <input>, которые находятся сразу же за <label>. При этом <input> и <label> должны располагаться на одном уровне вложенности, т.е. иметь одного родителя:

var $elements = $('label + input');

5. Найти все <div>, расположенные после .prev внутри одного родителя:

var $elements = $('.prev~div');

Управление контекстом

По умолчанию поиск элементов осуществляется во всём документе. Но при необходимости вы можете его ограничить, определив контекст поиска.

Контекст представляет собой элемент, в рамках которого следует производить выборку элементов.

Контекст передаётся во второй аргумент функции jQuery. Задавать его можно с помощью селектора, DOM-элемента или набора jQuery.

Например, найдём элементы с классом active в контексте элемента с id="#list":

// #list – контекст
var active = $('.active', '#list');

Задачи

1. Задача:

...
<body>
  <ul id="list"> <!-- 1 -->
    <li>Кофе</li> <!-- 2 -->
    <li class="active">Чай</li> <!-- 3 -->
    <li>Какао</li> <!-- 4 -->
  </ul>
  <p>Текст</p> <!-- 5 -->
</body>
</html>

$('#list') – 1;
$('.active') – 3;
$('li') – 2, 3, 4;
$('ul,li,p') – 1, 2, 3, 4, 5;

Источник

Вы можете использовать селекторы атрибутов CSS, чтобы найти элемент HTML на основе его значения data-attribute с помощью jQuery. Селекторы атрибутов предоставляют очень эффективный способ выбора элементов.

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Selecting Element by Data Attribute</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");
        
        // Выбираем изображение на основе значения data-slide
        $('.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/club.jpg" alt="Club" data-slide="1">
        </li>
        <li>
            <img src="images/diamond.jpg" alt="Diamond" data-slide="2">
        </li>
        <li>
            <img src="images/spade.jpg" alt="Spade" data-slide="3">
        </li>
        <li>
            <img src="images/heart.jpg" alt="Heart" data-slide="4">
        </li>
    </ul>
</body>
</html>

Without JQuery, ES6

Find a Data Attribute Using jQuery `.find()` Method

Find a Data Attribute Using a CSS Attribute Selector

Find a Data Attribute Using the `.filter()` Method

Введение

Базовые селекторы

Примеры

Селекторы атрибутов

Примеры

Селекторы отношений

Примеры

Управление контекстом

Задачи

Читайте также

Похожие посты

Добавить комментарий Отменить ответ

Without JQuery, ES6

Find a Data Attribute Using jQuery .find() Method

Find a Data Attribute Using a CSS Attribute Selector

Find a Data Attribute Using the .filter() Method

Введение

Базовые селекторы

Примеры

Селекторы атрибутов

Примеры

Селекторы отношений

Примеры

Управление контекстом

Задачи

Читайте также

Похожие посты

Вам также может понравиться

Яндекс как найти историю браузера на андроид

Если приказ написан неправильно как его исправить

Как найти откуда сэмпл

Добавить комментарий Отменить ответ

Find a Data Attribute Using jQuery `.find()` Method

Find a Data Attribute Using the `.filter()` Method