Agregar clase a UL y LI según el nivel - jquery, html

Tengo la siguiente marca 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>

y 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

Pero el nivel del segundo UL LI es diferente.

Por favor, ayúdame en esto.

Respuestas

4 para la respuesta № 1

Necesitas recorrer el <li>s en cada <ul> por separado, poniendo el segundo each bucle (para el <li>s) dentro de la primera.

Por ejemplo:

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++;
});
});

Por cierto, each toma un parámetro de índice, por lo que no necesita su i y j variables:

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);
});
});

(Probado)

---

0 para la respuesta № 2

Necesitas restablecer j después de cada 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;
});

});

(Sin probar)

También considere esto algo para hacer del lado del servidor.

---

0 para la respuesta № 3

Para cada UL deberías estar procesando el niño LI "s

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;
}
)

});

---