使用JQuery更改元素組的樣式？

我需要製作一個ul，它可以改變背景顏色爲4個li組（斑馬條紋，但我希望能夠在css中應用一次背景顏色，然後使用jQuery訪問它）。我不想僅僅使用類似第n個孩子的東西，因爲可能需要定期移除li，並且我希望佈局保持不變，而不必爲每個li改變類。我不確定這是否合理，但我已經將一個示例html放在一起，試圖展示我正在談論的內容。使用JQuery更改元素組的樣式？

我會很感激任何可能的建議，如何在每第四個元素（li）改變樣式（從白色到灰色背景）。

這裏有風格：

li.grey { 
background-color: #b9b9b9; 
} 

li.white { 
background-color: #ffffff; 
} 

.items_layout { 
padding: 0 0 0 0; 
width: 580px; 
} 

.item_container { 
color: #212D31; 
overflow: hidden; 
width: 580px; 
} 

.item_container li { 
float: left; 
width: 131px; 
height: 130px; 
padding: 2px; 5px 5px 5px; 
border-style:solid; 
border-width:2px; 
border-color: red; 
list-style: none; 
} 

.sample_header { 
    font-weight: bold; 
    padding: 2px 0 1px 0; 
    color: #0071B5; 
    }

而這裏的HTML：

<div class="items_layout"> 
    <ul class="item_container"> 

        <li><p class="sample_header">Header</p>      
        White background<br />(background-color: #ffffff)</li> 

        <li><p class="sample_header">Header</p>      
        White background<br />(background-color: #ffffff)</li> 

        <li><p class="sample_header">Header</p>      
        White background<br />(background-color: #ffffff)</li> 

        <li><p class="sample_header">Header</p>      
        White background<br />(background-color: #ffffff)</li> 

        <li><p class="sample_header">Header</p>      
        Grey background<br />(background-color: #b9b9b9;)<br />starts here</li> 

        <li><p class="sample_header">Header</p>      
        Grey background<br />Should go here</li> 

        <li><p class="sample_header">Header</p>      
        Grey background<br />Should go here</li> 

        <li><p class="sample_header">Header</p>      
        Grey background<br />Should go here</li> 

        <li><p class="sample_header">Header</p>      
        Back to<br /> white background here</li> 

        <li><p class="sample_header">Header</p>      
        Back to<br /> white background here</li> 
    </ul> 
</div>

我欣賞任何幫助或想法。謝謝！

來源

2012-01-11 B Rodman

爲什麼在CSS不使用第n個孩子（）呢？然後它會自動更新，如果您的HTML更改。 – Interrobang 2012-01-11 19:18:56

你想每隔4'li'或4' li' – 2012-01-11 19:24:14

塊中的每個'li'突出顯示4個li - 所以如果li被移除，則不需要對剩餘的li進行改變，但是造型保持不變。 – 2012-01-11 19:30:43

簡單迭代所有li元素並設置背景似乎更容易。無論何時添加/刪除列表中的元素，都可能需要調用此方法。

DEMO這裏。

JS功能：

var isWhite = true; 
$('ul.item_container > li'). each (function (index) { 
    isWhite = (index != 0 && index % 4 ==0)? !isWhite:isWhite; 
    if(isWhite == false) { 
     $(this).removeClass('white').addClass('grey'); 
    } else { 
     $(this).removeClass('grey').addClass('white'); 
    } 
});

來源

2012-01-11 19:30:43

完美 - 這正是我所設想的 - 非常感謝！ – 2012-01-11 20:50:02

你可以遍歷LI集合，並且當你這樣做的時候，保持trak從1到4的一個計數器並設置class1，當它到達數字4時，改變你正在應用的類。

來源

2012-01-11 19:19:37

使用JQuery更改元素組的樣式？

回答

相關問題