每 3 个可见的 div 创建一个 div答案

【问题标题】：Create a div every each 3 divs that are visible每 3 个可见的 div 创建一个 div
【发布时间】：2013-09-03 18:25:47
【问题描述】：

我想在每 3 个可见的 div 之后显示一个“容器”。因为在过滤器之后，每个 div 是否隐藏。

我想要在每 3 个 div 之后放置一个容器...但如果文章以一两个结尾就行了，只需在它们后面放一个容器。

例如： html

<div class="container">
    <article style="display:block"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:block"></article>
    <article style="display:none"></article>
    <article style="display:block"></article>
    <article style="display:block"></article>
</div>

jQuery(document).ready(function ($) {

    $('.container > article:visible:nth-child(3n)').after('<div class="receptacle"></div>');

    $('article').each(function () {
        $(this).on('click', function () {
            $(this).nextAll('receptacle').text('toto');
        });
    });

});

css

article {
    float:left;
    width:30%;
    height:40px;
    background:DeepSkyBlue;
    margin:5px;
}

小提琴： http://jsfiddle.net/XLK6z/

谢谢！

【问题讨论】：

这里有一个小提琴，可以更好地展示正在发生的事情。 jsfiddle.net/isherwood/XLK6z/2
stackoverflow.com/questions/2175694/… 应该可以帮助您解决问题。看起来它确实首先应用了第 n 个子选择器，然后是可见的。所以div 只会在可见的第 n 个孩子之后插入。

标签： javascript jquery html css

【解决方案1】：

看起来 nth-child 被“应用于”.container > article 而不是.container > article:visible。然后你可以“手动”过滤：

var $visible = $('.container > article:visible');
$visible.each(function(idx) {
    if (idx % 3 === 2 || idx === $visible.length - 1) {
         $(this).after('<div class="receptacle"></div>');
    }
});

【讨论】：

没有解决原来的订购问题：jsfiddle.net/isherwood/XLK6z/3
不应该idx % 3 等于0 不等于2？
没有。此代码按预期工作：在每个第三个可见 div 之后放置 div.receptacle。为什么会这样？我会把它留给你;-)
这是完美的 Kirilloid。谢谢大家的回答！

【解决方案2】：

问题在于您的 CSS。一切正常，但您正在四处游荡文章。

http://jsfiddle.net/isherwood/XLK6z/6

article {
    display: inline-block;
}

哦，我确实在点击功能中为您的插座选择器添加了一个点。

【讨论】：

【解决方案3】：

这是一个有效的方法：http://jsfiddle.net/XLK6z/8/

$(document).ready(function() {
    $(".container article").each(function(){
        if ($(this).is(":visible")){
            if ($(this).prevAll("article:visible").length%3 === 2  || $(this).is(":last-child")) {
                $(this).after('<div class="receptacle"></div>');
            }
        }
    });
});

【讨论】：