Задать вопрос

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+']')
но чувствую, что есть другой способ или функция, которая специально для этого создана
  • Вопрос задан
  • 80071 просмотр
Подписаться 7 Оценить 4 комментария
Ответ пользователя Виталий Архипов К ответам на вопрос (5)
@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)
Ответ написан
Комментировать