javascript - 每 3 个可见的 div 创建一个 div

Question

我想在每 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>

js

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/

谢谢！

Answer 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>');
    }
});

Answer 2

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

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

article {
    display: inline-block;
}

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

Answer 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>');
            }
        }
    });
});