Удалить правое поле на каждом четвертом элементе VISIBLE, используя jQuery?

Question

Я успешно использовал селектор jQuery : nth-child () , чтобы удалить правое поле с каждого четвертого элемента в длинном списке элементов div.Это выглядит так:

$(".myDivClass:nth-child(4n+4)").css("margin-right", 0);

Но страница также открыта для взаимодействия с пользователем (через jQuery), и одна из вещей, которую пользователь может сделать, это скрыть / показать элементы.Когда элемент скрыт, его стиль установлен на «display: none».Элементы плавают, поэтому, если вы удалите один элемент в середине строки, элемент из строки ниже будет подпрыгивать, например:

Моя первая мысль былапеределайте все это, сначала добавив поле для всех элементов, а затем удалите его из каждого четвертого видимого элемента;что-то вроде этого:

$(".myDivClass").css("margin-right","20px");
$(".myDivClass:visible:nth-child(4n+4").css("margin-right", 0);

Но вторая строка ничего не делает, и я не думаю, что вы можете сложить псевдоселекторы, как в примере выше (?)

Есть лирешение этой проблемы?Есть ли лучший способ сделать это?

Заранее спасибо!

/ Томас

Answer 1

Я знаю, что это не является прямым ответом на ваш вопрос, но когда я делаю подобные вещи с плавающей группой элементов блока с некоторым интервалом между ними, я обычно сохраняю поле для всех из них, но делаю их родительский контейнер иметь (в данном случае) отрицательное поле-право, равное расстоянию между элементами.

Таким образом, родитель все равно будет соответствовать вашему желанию, но дети будут просто плавать, как им нужно, с необходимым пространством.

Answer 2

Хмм, ладно, селектор nth-child() не работает должным образом. Кажется, игнорировать скрытые элементы. Так что вам может понадобиться .remove() или .detach() замкнутых элементов. Вот демо 1005 *, но оно изменяет границу вместо поля, чтобы сделать ее более заметной в демонстрационных целях.

$('.box:visible:nth-child(5n+5)').addClass('noSide');

$('.close').click(function() {
    // needs to be removed or detached because the nth child
    // appears to ignore hidden elements
    $(this).parent().detach();
    $('.noSide').removeClass('noSide');
    $('.box:visible:nth-child(5n+5)').addClass('noSide');
});