2013-08-17 7 views
0

Я только что обнаружил, что если я устанавливаю атрибут данных с помощью , я не могу искать элемент, используя jquery attribute selector, но если я его установлю с помощью .attr(), поиск будет выполнен.jquery: .data ('x', 'y') vs .attr ('data-x', 'y')

выход из моей хромированной консоли:

$('body').append($('<div></div>').data('x', 'y')); 
[<body>​…​</body>​] 
$('div[data-x="y"]') 
[] 
$('body').append($('<div></div>').attr('data-x', 'y')); 
[<body>​…​</body>​] 
$('div[data-x="y"]') 
[<div data-x=​"y">​</div>​] 

Мой вопрос, если это сохранить предположить, что это будет корректно работать в любом браузере Если я использую .attr().

+0

возможно дубликат [JQuery данных против Attr?] (Http://stackoverflow.com/questions/7261619/jquery-data-vs-attr) – zzzzBov

ответ

2

Он будет работать правильно, однако вы должны использовать data() в качестве геттера и сеттера.

Причина этого в том, что jQuery хранит все атрибуты data-* в объекте, который он хранит в памяти. Это означает, что много быстрее, чем доступ к DOM каждый раз для чтения/записи атрибута.

Если вам нужно выбрать элемент по атрибуту данных, используйте filter() - он, скорее всего, будет быстрее, чем селектор атрибутов, хотя я не тестировал.

var $filteredElements = $('.lots-of-elements').filter(function() { 
    return $(this).data('foo') == 'bar'; 
}); 
+0

Это было быстро. Спасибо. – clime

+0

Без проблем, рад помочь. –

1

Вы не можете выбрать/поиск .data() значений на странице, так как они хранятся в памяти внутренне JQuery.

jQuery.data('element','x','y');, как elements['element']['x'] = 'y'; для некоторых переменных в памяти JQuery в

тогда

$('element').attr('data-x','y') дает <element data-x="y"> на этой странице.

Что касается вашего вопроса, он ответил в документации JQuery:

Использование .attr JQuery в() метод, чтобы получить значение атрибута Элемент имеет две основные преимущества:

  • Удобство : Его можно вызвать непосредственно на объект jQuery и связать с другими методами jQuery.
  • Консистенция между браузерами: значения некоторых атрибутов сообщаются непоследовательно в браузерах и даже для версий одного браузера. Метод .attr() уменьшает такие несоответствия .

http://api.jquery.com/attr/