Question

我需要制作一个改变背景颜色的ul，以4 li的组（斑马条纹，但我希望能够在css中应用一次背景色，然后使用JQuery访问它）。我不想只使用像nth-child这样的东西，因为li可能需要定期删除，我希望布局保持不变，不必进入并更改每个li的类。我不确定这是否有意义，但我已经整理了一个示例html来试图展示我在说什么。

我很感激有关如何在每第四个元素（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>

我感谢您对此有任何帮助或想法。谢谢！

Answer 1

对所有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');
    }
});

Answer 2

你可以遍历LI集合，当你这样做时，保持计数器从1到4并设置class1，当它到达数字4时改变你正在应用的类。

使用JQuery更改元素组的样式？

2 个答案: