: видимый не работает с: nth-child селектор
У меня есть список элементов в сетке. Некоторые из них скрыты с помощью CSSdisplay: none;
через класс.hide
.
Я пытаюсь «очистить» каждый четвертыйвидимый элемент путем добавления класса.clear-left
к этому. Я не могу понять, почему мой сценарий не работает. Я использую селектор: visible, но он все еще считает количествоdisplay: none;
.
Что должно произойти, так это то, что вы всегда должны видеть 3 элемента подряд и без пробелов.
http://jsbin.com/ipORemIs/1/edit
HTML
<div class="grid">
<div class="item">
1
</div>
<div class="item hide">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item hide">
5
</div>
<div class="item">
6
</div>
</div>
CSS
body {
margin: 0;
}
.grid {
margin-left: -30px;
}
/* Items that are hidden */
.hide {
display: none;
}
.item {
width: 150px;
float: left;
border: 1px solid;
margin-left: 30px;
margin-bottom: 30px;
padding: 10px;
font-size: 3em;
text-align: center;
}
.clear-left {
clear: left;
}
JS
var $itemShow = $('.item:visible');
$itemShow.filter(':nth-child(3n+1)').addClass('clear-left');