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

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