Увеличить значение атрибута (int) для каждого элемента, используя jquery

Question

У меня есть неизвестное количество элементов раздела:

<section id="foo">
...
</section>

<section id="bar">
...
</section>

Для каждого присутствующего раздела мне нужно добавить атрибут «data-serial», который является целым числом, начинающимся с 0 и увеличивающимся на 1например, для каждого присутствующего раздела вышеприведенное приведёт к следующему:

<section id="foo" data-serial="0">
...
</section>

<section id="bar" data-serial="1">
...
</section>

<section id="bla" data-serial="2">
...
</section>
...

Как мне добиться этого с помощью jQuery?

Спасибо

Answer 1

Модифицированная версия ответа Джеймса Аллардика, использующая преимущества редко используемых параметров, которые каждый передает функции, которую ему дают.Первый параметр - это индекс текущей итерации цикла.

http://api.jquery.com/each/

$("section").each(function(index) {
   $(this).attr("data-serial", index);
});

Answer 2

var current = 0;
$("section").each(function() {
   $(this).data("serial", current);
   current++;
});

Это перебирает все элементы section в документе и присоединяет значение current к каждому элементу с помощью метода jQuery data.

Answer 3

$("section").each(function(i, e) { $(e).attr("data-serial", i) });

Answer 4

что-то вроде

var i = 0;
$('section').each(function() {
    $(this).data('serial', i++);
});