Hinzufügen von Klassen zu den UL und LI gemäß der Ebene - jquery, html

Ich habe die folgende HTML-Markierung.

<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>

und 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

Das Niveau des zweiten UL LI ist jedoch unterschiedlich.

Bitte hilf mir dabei.

Antworten:

4 für die Antwort № 1

Du musst durchlaufen <li>s in jedem <ul> separat, indem Sie die zweite setzen each Schleife (für die <li>s) im ersten.

Beispielsweise:

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

Apropos, each nimmt einen Index-Parameter, damit Sie Ihren nicht brauchen i und j Variablen:

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

(Geprüft)

---

0 für die Antwort № 2

Sie müssen zurücksetzen j nach jedem 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;
});

});

(Ungetestet)

Betrachten Sie dies auch als serverseitig.

---

0 für die Antwort № 3

Für jeden UL sollten Sie die untergeordneten LIs verarbeiten

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

});

---