Использовать JQuery, чтобы изменить стиль для групп элементов?

Question

Мне нужно сделать ul, который меняет цвет фона в группах по 4 литра (чередование зебр, но я хочу иметь возможность применить цвет фона один раз в 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, меняйте класс, который вы применяете.