Question

我知道我可以计算这样的'可见'列表项的数量：

var numOfVisibleDevices = $('.row-fluid ul.thumbnails li:visible').length;

我知道我可以使用这个来定位第n个项目（我必须支持IE8所以不能只使用CSS3）：

$('.row-fluid ul.thumbnails li.span6:nth-child(2n + 3)').addClass('span-left');
$('.row-fluid ul.thumbnails li.span4:nth-child(3n + 4)').addClass('span-left');
$('.row-fluid ul.thumbnails li.span3:nth-child(4n + 5)').addClass('span-left');

但我不知道的是如何将两者结合起来，所以我计算列表中可见的项目数，然后将'span-left'类应用于可见项的第n个子项。 / p>

因为我正在使用Bootstrap，所以span6项目在一条线上适合2，span4将适合3，span3将适合4。因此，我正在添加类，以便我可以清除第3项（对于span6），第4项（对于span4）和第5项（对于span3）的浮动。原因是每个列表项的高度可能不同，但我不希望在它们上设置最小高度。这样，每当列表包含在下一行时，下一行的第一项将清除浮点数，布局总是很好。

HTML只是一个列表：

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span4">Some content</li>
        <li class="span4">Some content</li>
        <li class="span4">Some content</li>
    </ul>
</div>

Answer 1

使用$.each迭代元素，然后应用逻辑。

var $elems = $('.row-fluid ul.thumbnails li:visible');

$elems.each(function() {
     var $this = $(this);
     if($this.hasClass('span3')) {
         $this.filter(':nth-child(4n + 5)').addClass('span-left');
     }
     else if($this.hasClass('span4')) {
         $this.filter(':nth-child(3n + 4)').addClass('span-left');
     }
     else if($this.hasClass('span6')) {
         $this.filter(':nth-child(2n + 3)').addClass('span-left');
     }
});

Answer 2

您需要遍历可见的UL列表项

检查jQuery each()方法：http://api.jquery.com/jQuery.each/

$('.row-fluid ul.thumbnails li:visible').each(function(e) {
    $('.row-fluid ul.thumbnails li.span6:nth-child(2n + 3)').addClass('span-left');
    // note sure what exactly you need to do here but basically this will iterate through all visible li items of your ul
});

Answer 3

你可以

var visibleDevices = $('.row-fluid ul.thumbnails li:visible');
var numOfVisibleDevices = visibleDevices.length;

visibleDevices.eq(2n + 3).addClass('span-left');

计算可见列表项，然后将类应用于jQuery中该列表的第n项？

3 个答案: