0

表示される 3 つの div ごとに「レセプタクル」を表示したいと思います。フィルターに従っているため、各 div は非表示かどうかに関係なく表示されます。

各 3 div の直後にレセプタクルが必要ですが、記事が 1 つまたは 2 つの行で終了する場合は、それらの後にレセプタクルを配置します。

例: 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/

ありがとう！

4

3 に答える 3

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>');
    }
});
于 2013-09-03T18:33:06.353 に答える
0

これが機能するものです： 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>');
            }
        }
    });
});
于 2013-09-03T18:52:25.347 に答える