Как добавить прогрессивные идентификаторы к элементам с помощью jquery?

Question

Используя jquery, я хочу добавить идентификатор в серию div, но, конечно, идентификаторы всегда должны быть разными, поэтому я подумал, что у меня должно быть прогрессивное число, например id="1", id="2", id="3" так далее.

вот моя разметка:

содержание

    <div class="box">
        <p>
            content
        </p>
    </div>
    <div class="box">
        <p>
            content
        </p>
    </div>
    <div class="box">
        <p>
            content
        </p>
    </div>

Я пробовал цикл.each(), но я не знаю, что передать как коллекцию (может быть, $('. Box'). Lenght()? Но возвращает число, а не коллекцию) и как реализовать функцию обратного вызова. любая помощь, пожалуйста?

Заранее спасибо:)

Mauro

Answer 1

Ты можешь использовать .each() как это:

$(".box").each(function(i, div) {
  div.id = "div" + (i+1); //i starts at 0
});

Идентификаторы не могут начинаться с цифры, в любом случае не с HTML4, поэтому я добавил префикс выше. .each() Функция обратного вызова получает индекс и элемент в качестве аргументов, это 0, поэтому добавьте 1 если вы хотите, чтобы начать с 1,

Вы можете проверить это здесь.

Answer 2

.attr() принимает функции

$(".box").attr('id', function(i) {
    return 'div_' + i;
});