Встала такая задача. Нужно найти все элементы на странице по его значению в data. Думаю, что описать все это на реальном примере будет намного проще, поэтому давайте отправимся в увлекательное путешествие по внутренностям и нюансам интернет-магазина.
Мы имеем на странице input, куда записываются данные товаров, что находятся в корзине:
<input type="hidden" value="↕99566↕98266↕" data-ids="["99566","98266"]" data-d="{"99566":{"id":"458620","quant":1,"price":299999},"98266":{"id":"458621","quant":1,"price":309}}" data-l="{"458620":"99566","458621":"98266"}" class="jq_basket_id">
Собственно, в некоторые элементы на странице данные записываются в data, а если нужно, то данные там появляются после перезагрузки страницы. Однако, появились и ситуации, когда нужно обратиться к определенному элементу по классу ".jq_item_remove " (к примеру) с определенным значением data без перезагрузки страницы.
В данный момент мы записываем значение в data и следом в это же поле, но через функцию attr(). То бишь, получаем примерно такой вариант:
var th = $('.jq_buy[jq_id='+id+']');
th.siblings('.jq_item_remove').data('id', jq_id).attr('data-id', jq_id);
Как вы уже поняли мы обращаемся к элементу по его классу и значению в определенном атрибуте. Если же значение будет только в data (в DOM) и его не будет в атрибуте, то функция не отработает. Собственно, встает такой вопрос, существует ли вариант такого же обращения только по data (DOM) без использования функций перебора элементов (по типу filter() и прочих)?
Нужно все это, дабы полностью избавиться от атрибутов и работать только с data. Почему нельзя использовать функции перебора? Да потому что на странице может находиться под сотню элементов с одним классом и нужно обращение сразу к конкретному элементу. Как все это можно реализовать? Есть ли более грамотные решения? Если будут еще вопросы, то задавайте, постараюсь описать все подробнее!