: видимый не работает с: 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');

Ответы на вопрос(4)

Ваш ответ на вопрос