Добавить последовательность чисел в div

Question

У меня есть список из 8 делений, и мне нужно добавить к ним последовательность номеров классов, используя Jquery для индивидуального стиля. Нужно добавить их в div 'content-block', см. Пример ниже.

Желаемый эффект будет примерно таким:

<div class="wrapper">
<div id="content-block" *class="post1"*>
</div></div>

<div class="wrapper">
<div id="content-block" *class="post2"*>
</div></div>

Я добавил скрипт

**Javascript**
$('.post-block').each(function(i){
$(this).addClass('post' + i);})

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

Desired effect
**HTML**
<div id="post1" class="post-block">
</div>

<div id="post2" class="post-block">
</div>

Большое спасибо

Answer 1

Пример jsFiddle

Во-первых, вы можете использовать идентификатор только один раз на странице. Вы можете использовать классы много раз на странице.

Из-за этого я сделал content-block класс, и я сделал ваши различные post1, post2 ... идентификаторы.

Функция ниже будет проходить через каждый элементов, которые имеют класс content-block в классе wrapper, и будет добавлять соответствующий id к каждому один. Для функции обратного вызова each() вы можете использовать index и value в качестве аргументов. Я создал отдельную переменную num, поскольку index начинается с нуля.

В функции each вы также можете использовать this вместо value.

JQuery:

$.each($(".wrapper > .content-block"), function(index, value){
    var num = index + 1;
    $(value).attr("id","post"+ num);
});

Answer 2

Если вы избавитесь от идентификаторов, вы можете просто сделать это (при условии, что есть только один дочерний элемент <div> на .wrapper.

$(".wrapper > div").addClass(function(i) { return 'post' + (i + 1) });

Это приведет к:

<div class="wrapper">
    <div class="post1"></div>
</div>
<div class="wrapper">
    <div class="post2"></div>
</div>
<div class="wrapper">
    <div class="post3"></div>
</div>
...

Answer 3

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

$('.wrapper').find('div').each(function(index){
    $(this).attr('id', 'unique-' + ++index);
});

Answer 4

Почему бы не превратить ваши div в li, часть элемента OL?Семантически более актуально ...

Answer 5

Предположим, вы исправили дублированную проблему id, и у вас есть внешний контейнерный объект.Тогда у нас будет:

$('div#outercontainer').find('div.wrapper > div').each( function(i){
  var postnum = i+1; // remove any possible overloaded "+" operator ambiguity
  $(this).addClass('post'+postnum);
});

Answer 6

Вы можете использовать это:

$(".content-block").each(function(i){
    $(this).addClass("post" + i);
})

Obs: я использую селектор класса (".content-block"), а не селектор идентификатора ("# content-block").