→   Атрибуты html5 data-*

В html5 были введен атрибуты с приставкой data-*. Наверняка многие уже их встречали копаясь в различных css фреймворках типа Bootstrap'а. Их можно прикрепить к любому тегу, например, вот так:

<span data-name="name"></span>

В ленте комментариев на каких-нибудь блоговых сервисах, да или на том же ВордПрессе, можно встретить такую конструкцию:

<div id="commnets">
  <div id="comment077">...</div>
  <div id="comment078">...</div>
  <div id="comment077">...</div>
  ...
</div>

В случае с комментариями это делается для того, чтобы можно было дать ссылку на определнный комментарий с помощью хеша, добавив в конце линка через решетку id комментария (#comment077).

А что если появляется условие, каким-то образом выделять определенные комментарии с помощью JavaScript, то есть, прямо на клиенте. Тут на помощь приходят дополнительные аттрибуты. Некоторые ребята используют атрибут rel, но его можно использовать только у ссылок. Я иногда придумываю атрибуты сам, а потом ищу их с помощью jQuery метода .attr(). В сложных интерфейсах операция будет слишком ресурсоемкой.

Возьмем разметку:

  <div id="elem" data-count="077"></div>

С версии 1.4.3 метод jQuery .data() научился добираться до элементов с помощью data-атрибутов, таким образом:

var count = $(#elem).data('count'); // в переменную count запишется значение 077

Так можно быстро добраться до нужного элемента. Самое приятное, что это все нативно — html5 и js работают в связке.

Есть еще один приятный момент — элементы можно искать по аттрибутам и вот так: $('[data-count]'). Получим элемент с атрибутом data-count="077"