同位素问题与css:nth-​​child(3n + 2)

Question

我使用Isotope js为Bootstrap项目进行排序.排序时我遇到了问题.我用了

.col-md-4:nth-child(3n+2) {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

当我用同位素排序时,应用于3n+2位置的CSS 是变化的.(因为Isotope将CSS作为position absolute).在排序和正常情况下,我希望每行中的两个项目左右边框.指导我解决这个问题.

在jsfiddle:http://jsfiddle.net/tamilcselvan/v0k608x1/

$(function () {
    $container = $('.row');
    $container.isotope({
        itemSelector: '.col-md-4',
        layoutMode: 'fitRows',
        getSortData: {
            name: '.name'
        }
    });

    $('button').click(function () {
        $container.isotope({
            sortBy: 'name'
        });
    });

});

.col-md-4:nth-child(3n+2) {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.col-md-4:nth-child(3n+1) {
    padding-left: 0;
}
.col-md-4:nth-child(3n+3) {
    padding-right: 0;
}
.col-md-4 {
    text-align:center;
    margin: 0 0 1em 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>

<button>Name</button>
<div class="container">
    <div class="row">
        <div class="col-md-4">
             <h2 class="name">Q</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">W</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">E</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">R</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">T</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">Y</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">U</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">I</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">O</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">P</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">A</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">S</h2>

        </div>
        <div class="col-md-4">
             <h2 class="name">D</h2>

        </div>
    </div>
</div>

(注意:请全屏查看运行代码段).

Answer 1

所以这可能看起来有点"hacky"但它确实完成了你想要做的事情.

https://jsfiddle.net/v0k608x1/4/

$(function () {

    $container = $('.row');
    $container.isotope({
        itemSelector: '.span4',
        layoutMode: 'fitRows',
        getSortData: {
            name: '.name'
        }
    });
    // Add a function to re-apply it after sorted
    $container.isotope( 'on', 'arrangeComplete', function( filteredItems ) {
        for (i = 0; i < filteredItems.length; i++) {
            // Replicates :nth-child(3n+1)
            var css3n1 = (3*i)+1;
            if (filteredItems[css3n1] !== undefined) {
                $(filteredItems[css3n1].element).css({
                    'border-left': '1px solid #ccc',
                    'border-right': '1px solid #ccc',
                });
            } else {
                break;
            }
        }
    });

    $('button').click(function () {
        // Clear Styling before sorting so it can be re-applied
        $('.span4').css({
            'border-left': 'none',
            'border-right': 'none',
        });
        $container.isotope({
            sortBy: 'name'
        });
    });

});