JQuery 1.4.4: Как найти элемент на основе его значения атрибута данных? - PullRequest
Новая
       24

JQuery 1.4.4: Как найти элемент на основе его значения атрибута данных?

6 голосов
/ 16 ноября 2010

Я полагаю, что это должно быть довольно тривиальной задачей, но с использованием Firefox для Mac, 3.6.12 следующее не работает: 

// assign data attributes
$('.gallery li').each(function(i) {
    $(this).data('slide',i+1);
});

// outputting an empty jQuery object
console.log($('.gallery li[data-slide]'));

// this does not work either outputting an empty jQuery object
console.log($("[data-slide]"));

с использованием Firebug Я вижу, что все атрибуты слайдов данных, включая ихчисловые значения правильно привязаны к li с и выходят из системы: 

$('.gallery li').each(function(index) {
  console.log($(this).data());
});

выводит, как и ожидалось: 

Object { slide=1}
Object { slide=2}
Object { slide=3}
Object { slide=4}

Так почему первый console.log не работает?

1 Ответ

9 голосов
/ 16 ноября 2010

data добавляет элементы во внутренний держатель данных jQuery, а не в атрибуты data-. Они считываются в структуру data() jQuery, но значения, вставленные с использованием jQuery, не передаются обратно в DOM.

Самый простой способ подражать этому - использовать .filter(): 

// To replicate $('.gallery li[data-slide]')
$('.gallery li').filter(function(){
    return (undefined !== $(this).data('slide'));
});

Вы также можете сделать это как пользовательский селектор: 

$.expr[':'].hasData = function(obj, index, meta, stack) {
    return (undefined !== $(obj).data(meta[3]));
};

$('.gallery li:hasData(slide)'); // li elements under .gallery with "slide" data set
$(':hasData(slide)'); // any element with "slide" data set
...