Определите количество делений с помощью jQuery

Question

Я использую jQuery Tools (http://flowplayer.org/tools/index.html) для создания всплывающих подсказок, я создал js-файл, содержащий следующие строки:

$("div#example-0").tooltip('#example-0-tooltip');
$("div#example-1").tooltip('#example-1-tooltip');
$("div#example-2").tooltip('#example-2-tooltip');
$("div#example-3").tooltip('#example-3-tooltip');

и т.д.

Это прекрасно работает, если есть известное количество примеров-дивов, однако я бы хотел, чтобы это работало с неизвестным числом примеров-дивов.

По сути, я бы хотел, чтобы мой jQuery мог читать DOM-дерево и определять, сколько там примеров-дивов, как-то проходить по ним все и добавлять подсказку.

Кто-нибудь знает, как это сделать?

Answer 1

Использование начинается с атрибута matcher и повторяется. Возьмите идентификатор из текущего элемента и вызовите всплывающую подсказку.

$('div[id^=example-]').each( function() {
    $(this).tooltip( '#' + $(this).attr('id') + '-tooltip' );
});

Или, если у каждого из них был один и тот же класс в дополнение к уникальным идентификаторам.

$('div.exampleClass').each( function() {
    $(this).tooltip( '#' + $(this).attr('id') + '-tooltip' );
});

Или, если, как подсказывает @Savageman, вы можете избежать повторного использования DIV с тем же именем для всплывающей подсказки (и использовать класс, чтобы пометить все div, для которых нужна всплывающая подсказка).

$('div.exampleClass').tooltip('#exampleTooltip');

Answer 2

Дайте им всем одинаковый класс, чтобы вы могли просто сделать

$('div.classname').tooltip(...);

Answer 3

не уверен, поможет ли это, но есть плагин всплывающей подсказки для jquery, который может использовать атрибут title тега для генерации всплывающей подсказки. Он делает это автоматически, поэтому вам не нужно устанавливать оператор для каждого, просто присваивайте заголовок div.

Answer 4

Поместите определенный класс для всех div. Основной код останется прежним.

Ex:

<div id="1" class="tooltip">
</div>

<div id="2" class="tooltip">
</div>
<div id="3" class="tooltip">
</div>
<div id="4" class="tooltip">
</div>

и код:

$("div.tooltip").tooltip('#example-0-tooltip');

Answer 5

Возвращает номер элемента:

$('element').size();