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

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

3 个答案: