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

Question

[Василий]

Доброго времени суток
Как известно к атрибутам 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+']')
но чувствую, что есть другой способ или функция, которая специально для этого создана

Comments

[Виталий Архипов]

Не очень понятно чем вас не устраивает этот способ?

[aen]

@arvitaly может быть тем, что селектор через атрибуты ужасно медленный?

[Василий]

@arvitaly всем устраивает, но думал может есть какая функция из функционала jQuery, потому что, например, у нас есть какой либо класс class1, на него мы можем повесить обработчик и перехватывать действия пользователя, то есть -

$('.class1').on('change', function()
{
$(this).data('id'); //вернет нам значение id
});

и думал может в jQuery есть что-то типа такогоэ

$('.class1').data('id',1) // возвращает нам элемент у которого class1 и атрибут data-id=1, но данная команда делает замену атрибута

как-то так, то есть, без объединений строк, через функцию

[Василий]

Наверное стоило лучше уточнить вопрос.
Ситуация такая - есть input с data-id=1, к примеру, есть картинка img с data-id=1 и вот нужно чтобы после изменения этого input картинка img с тем же data-id появлялась.
По сути да, можно сделать так что у input свой id = item-1, следующий input-2, потом input-3 и так далее до 17ти(пример), но в коде же чтобы выдрать номер id надо будет городить что-то вроде

var id = explode('-', $('[id^=item);
id = id[1];

что немного хуже смотрится чем
$(['input']).data('id');

Или я в корне ошибаюсь?

Answer 1

[RubaXa]

Вполне нормальный селектор, только контекст добавить не мешало бы и использовать $.fn.children (если задача/разметка позволяет):

var $item = $('#dataset').children('[data-id="'+id+'"]');

Answer 2

[Сергей Протько]

ничего не нужно выдумывать. Обычный селектор по атрибуту. И работает он так же как и все остальные селекторы по скорости (если конечно вы не про ie7 какой-нибудь). Скорость работы селектора равноценна его специфичности. Скажем селектор #dataset [data-toggle] будет работать медленнее чем #dataset > [data-toggle] или же просто [data-toggle]. Селекторы все же с права на лево обрабатываются. И да, так мы жестко даем понять что мы должны добавить атрибут а не через метод $.fn.data назначить что-то.

Comments

[Trionik]

А пример где?

Answer 3

[Виталий Архипов]

api.jqueryui.com/category/selectors
Ну видимо jquery через плагин только дает это сделать.

Comments

[Василий]

это уже ближе, но хотелось бы на jQuery, без UI

[Виталий Архипов]

Ну там можно выборочно чисто selectors выдрать jqueryui.com/download

Answer 4

[aen]

А зачем вообще так делать? Что вам мешает добавить еще один класс в разметку и уже по нему обращаться. Это будет гораздо быстрее, чем через атрибут.

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

Comments

[Виталий Архипов]

Селектор по data как раз таки был бы реализован не через аттрибуты, так как data хранится в свойстве объекта dataset

[aen]

$('[data-id='+id+']') - это селектор по атрибуту и он будет работать так, как я это описал.

[Виталий Архипов]

Я про то, что если есть отдельный селектор по data, как я скинул ниже ссылку, то тогда ваши аргументы про скорость уже могут быть не актуальны, а вопрос ТС актуальным.

[Василий]

состояние не меняют это понятно, оно и не надо и поэтому не использую там где присутствуют изменчивые параметры.
По поводу нового класса - есть элемент который жестко связан с другим элементом, тут получается что нужно будет добавлять классы id-elem=1 обоим элементам потом другим таким же id-elem=2 и т.д., что по сути не имеет смысла, т.к. в коде будем искать их как $('class^=id-elem')

Answer 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)