2013-11-27 56 views
0

我試圖將類應用於以第4(3n + 4)開頭的每3個列表項。 當所有列表項都可見時,這可以正常使用CSS。CSS - 將類添加到3n + 4'可見'列表項

不幸的是,當某些列表項被隱藏(display:none)時,第n個子選擇器也適用於那些隱藏的列表項。

我需要的CSS只適用於可見列表項目,所以我做了一些研究,並嘗試使用jQuery和可見選擇器來實現所需的結果。這也沒有用。

請看我下面的代碼爲例。

任何幫助將不勝感激。 謝謝

http://codepen.io/anon/pen/xuqwf

HTML

<ul> 
    <li>1</li> 
    <li style="display: none;">2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li style="display: none;">6</li> 
    <li>7</li> 
    <li>8</li> 
</ul> 

CSS

ul li { 
    background: yellow; 
    border: 1px orange solid; 
    margin: 5px; 
} 

ul li:nth-child(3n+4) { 
    background: green; 
} 

.clear { 
    background: red; 
} 

的jQuery(嘗試和失敗)

$('ul li:visible:nth-child(3n+4)').addClass('clear'); 
+1

您的jQuery [工作正常(http://jsfiddle.net/oGeez/VQ337/1/) - 做什麼你的意思是失敗? – George

+0

而不是使用內聯樣式,你應該使用一個類,然後只能使用CSS –

+0

@oGeez - 我不認爲它確實... http://jsfiddle.net/VQ337/3/ – Adam

回答

1

循環:

var i = 0; 
$('ul li:visible').each(function(index,el) { 
if((index+1)%(3*i+4) == 0) { 
    $(this).addClass('clear'); 
    i++; 
} 
}); 
+0

這可以按需要工作,謝謝。 –

1

你jQuery是工作的罰款。將隱藏列表項目放入主列表容器內的「子列表」中。然後應用JQuery的嚴格的「主目錄」

檢查小提琴http://jsfiddle.net/defmetalhead/VQ337/9/

<ul class="mainList"> 
    <li>1</li> 
    <li>2</li> 
    <li>3 
    <ul> 
     <li style="display: none;">3-1</li> 
     <li style="display: none;">3-2</li> 
     <li style="display: none;">3-3</li> 
     <li style="display: none;">3-4</li> 
    </ul> 
    </li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
</ul> 

新的jQuery線

$('.mainList').children('li:nth-child(3n+4)').addClass('clear'); 
+0

謝謝,這是一個靜態列表,但我的列表是以編程方式創建的,我覺得嘗試實現這一點將是一場噩夢。 –

0

而是每3個孩子的屬性與CSS選擇設定,添加類給他們使用jQuery,然後在想要將它們更改爲綠色時替換該類。您無法覆蓋CSS選擇器ul li:nth-child(3n+4)

CSS:

ul li { 
background: yellow; 
border: 1px orange solid; 
margin: 5px; 
} 

.green { 
background: green; 
} 

.hide { 
display: none; 
} 

.clear { 
background: red; 
} 

的jQuery:

$('ul li:visible:nth-child(3n+4)').addClass('green'); 
$('ul li:visible:nth-child(3n+4)').removeClass('green').addClass('clear');