使用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更改元素组的样式？

回答

相关问题