Добавяне на клас към UL и LI според нивото - jquery, html

Имам следната HTML маркировка.

<ul class="thumbs">
<li>
<strong>Should be level 0</strong>
</li>
<li>
<strong>Should be level 1</strong>
</li>
<li>
<strong>Should be level 2</strong>
</li>
</ul>

<ul class="thumbs">
<li>
<strong>Should be level 0 --  </strong>
</li>
<li>
<strong>Should be level 1 --  </strong>
</li>
</ul>

и javascript:

var i = 0;
var j = 0;
jQuery("ul.thumbs").each(function(){
var newName = "ul -level" + i;
jQuery(this).addClass("ul-level-"+i)
.before("<h2>"+newName+"</h2>");
i = i+1;
});

jQuery("ul.thumbs li").each(function(){
jQuery(this).addClass("li-level-"+j)
.append("li-level-"+j);
j = j+1;
});

JS Bin Link

Но нивото на втория UL LI е различно.

Моля, помогнете ми с това.

Отговори:

4 за отговор № 1

Трябва да преминете през <li>във всяка <ul> отделно, чрез поставяне на второто each цикъл (за <li>и) в първата.

Например:

var i = 0;
jQuery("ul.thumbs").each(function(){
var newName = "ul -level" + i;
jQuery(this).addClass("ul-level-"+i)
.before("<h2>"+newName+"</h2>");
i++;

var j = 0;
jQuery(this).children("li").each(function(){
jQuery(this).addClass("li-level-"+j)
.append("li-level-"+j);
j++;
});
});

Между другото, each взема параметър за индекс, така че не се нуждаете от вашия i и j променливи:

jQuery("ul.thumbs").each(function(i){
var newName = "ul -level" + i;

jQuery(this).addClass("ul-level-" + i)
.before("<h2>" + newName + "</h2>")

.children("li").each(function(j) {
jQuery(this).addClass("li-level-" + j)
.append("li-level-" + j);
});
});

(Тествани)

---

0 за отговор № 2

Трябва да нулирате j след всяко ul:

  var i = 0;
var j = 0;
jQuery("ul.thumbs").each(function(){
var newName = "ul -level" + i;
jQuery(this).addClass("ul-level-"+i)
.before("<h2>"+newName+"</h2>");
i = i+1;

j = 0;
jQuery("li", this).each(function(){
jQuery(this).addClass("li-level-"+j)
.append("li-level-"+j);
j = j+1;
});

});

(Неизпитани)

Също така помислете за нещо, което трябва да направите от страна на сървъра.

---

0 за отговор № 3

За всяка UL трябва да обработвате детето LI

var i = 0;
var j = 0;

jQuery("ul.thumbs").each(function(){
var newName = "ul -level" + i;
jQuery(this).addClass("ul-level-"+i)
.before("<h2>"+newName+"</h2>");
i = i+1;

j=0;

jQuery(this).children("li").each(
function(){
jQuery(this).addClass("li-level-"+j)
.append("li-level-"+j);
j = j+1;
}
)

});

---