0

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

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 个孩子。

因为我使用的是 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>
4

3 回答 3

0

用于$.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');
     }
});
于 2013-07-17T02:39:50.233 回答
0

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

检查jQueryeach()方法：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
});
于 2013-07-17T02:42:49.567 回答
0

你可以

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

visibleDevices.eq(2n + 3).addClass('span-left');
于 2013-07-17T02:46:41.840 回答