2009-08-11 13 views
16

मेरे पास तत्वों की एक सूची है जिसे मैं 3 अलग-अलग तरीकों से स्टाइल करना चाहता हूं।addclass प्रत्येक nth

मैं चाहता हूं कि प्रत्येक तीसरी सूची वस्तु पूरी सूची में एक ही कक्षा में हो। साथ

<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 
<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 
<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 

मैं क्या कर सकते हैं 2:

उदाहरण के लिए अजीब/भी है, लेकिन यह कैसे 3 से कोई लेना देना?

उत्तर

45

कोशिश

$("ul li:nth-child(3n+1)").addClass("A") 
$("ul li:nth-child(3n+2)").addClass("B") 
$("ul li:nth-child(3n)").addClass("C") 

यह खूबसूरत बनाने के लिए यह मजबूत करने के लिए स्वतंत्र महसूस, लेकिन मैं चयनकर्ताओं को बेनकाब करना चाहता था।

+2

इसे एक समाधान समाधान का उपयोग करने के लिए: $ ('ul li: nth -चल्ड (3 एन) ')। एडक्लास (' हर-तिहाई-वस्तु-वर्ग '); – shuckster

+0

@ ब्रौनस्टोन - संपादन देखें, मैंने इसे अपनी कुल चिंता को संबोधित करने के लिए बदल दिया (हालांकि लंबे समय तक) – Marc

+1

धन्यवाद मार्क। यह वही था जो मैं बिल्कुल था चाहता था। – davebowker

2

मैं कुछ इस तरह की सिफारिश:

var i = 0; 
$("li").each(function() { 
    var newClass = 'A'; 
    if (i % 3 == 1) newClass = 'B'; 
    if (i % 3 == 2) newClass = 'C'; 
    $(this).addClass(newClass); 
}); 
+2

यह काम नहीं करता है ... पहली पंक्ति हटाएं और "i" में जोड़ें .... प्रत्येक (फ़ंक्शन (i) .... – ggzone

संबंधित मुद्दे