स्तर के अनुसार यूएल और एलआई में वर्ग जोड़ना - jquery, 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>

और जावास्क्रिप्ट:

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

जेएस बिन लिंक

लेकिन दूसरे UL LI का स्तर अलग है।

कृपया इसमें मेरी मदद करें।

उत्तर:

उत्तर № 1 के लिए 4

आप के माध्यम से पाश की जरूरत है <li>प्रत्येक में है <ul> अलग से, दूसरा डालकर each पाश (के लिए) <li>s) पहले वाले के अंदर।

उदाहरण के लिए:

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

});

(Untested)

सर्वर-साइड करने के लिए भी इस पर विचार करें।

---

जवाब के लिए 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;
}
)

});

---