jQuery, обращение к элементу через атрибут data-*

Доброго времени суток
Как известно к атрибутам data-* можно обращаться через функцию jQuery data('foo') и получить значение этого пользовательского атрибута.
<ul>
<li class="demo" data-id='1'>Пункт 1</li>
<li class="demo" data-id='2'>Пункт 2</li>
<li class="demo" data-id='3'>Пункт 3</li>
<li class="demo" data-id='4'>Пункт 4</li>
</ul>

то есть если повесить обработчик onclick на класс demo и вызвать в функции $(this).data('id') он вернет нам значение этого атрибута, т.е. щелкнули на пункт 3, вернется 3
Но! Как добраться непосредственно по значению id к элементу li, то есть знаем что нам нужен li с id 2 как к нему обратиться? Нашёл способ
$('[data-id='+id+']')
но чувствую, что есть другой способ или функция, которая специально для этого создана
  • Вопрос задан
  • 65276 просмотров
Решения вопроса 2
RubaXa
@RubaXa
Вполне нормальный селектор, только контекст добавить не мешало бы и использовать $.fn.children (если задача/разметка позволяет):
var $item = $('#dataset').children('[data-id="'+id+'"]');
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
ничего не нужно выдумывать. Обычный селектор по атрибуту. И работает он так же как и все остальные селекторы по скорости (если конечно вы не про ie7 какой-нибудь). Скорость работы селектора равноценна его специфичности. Скажем селектор #dataset [data-toggle] будет работать медленнее чем #dataset > [data-toggle] или же просто [data-toggle]. Селекторы все же с права на лево обрабатываются. И да, так мы жестко даем понять что мы должны добавить атрибут а не через метод $.fn.data назначить что-то.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
api.jqueryui.com/category/selectors
Ну видимо jquery через плагин только дает это сделать.
Ответ написан
aen
@aen
Keep calm and 'use strict';
А зачем вообще так делать? Что вам мешает добавить еще один класс в разметку и уже по нему обращаться. Это будет гораздо быстрее, чем через атрибут.

Опять таки есть нюанс. Дата атрибуты при изменении не меняют своего состояния в разметке. То есть, если у вас был элемент:
<li class="demo" data-id='1'>Пункт 1</li>,
затем его значение дата атрибута поменяли
$('demo').eq(0).data('id', 3),
то вы разметке он все также останется
<li class="demo" data-id='1'>Пункт 1</li>.
Это может привести к проблемам.
Ответ написан
@dedik Ну как вариант вы всегда можете дописать свой селектор (особенно если не важна скорость :-) Думаю в вашем случае - вы легко можете себе это позволить.

jQuery.extend(jQuery.expr[':'], {  data: function (el,index,prop) {
    if (typeof(prop[3]!=undefined) && prop[3])
    {
        var attrs=prop[3].split('=');
        if ( $(el).attr('data-' + attrs[0]) && ( (attrs.length > 1 && $(el).attr('data-' + attrs[0])==attrs[1]) || attrs.length == 1 ) )
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    return false;    
}});
console.log($(':data(id=5)'));


Только не забывайте делать селектор с контекстом, чтобы перебор был только в нужом месте, как писали выше, т.е.
$(':data(id=5)', DIV_WITH_IMAGES)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы