Question

问题： 我有一个像这样的jQuery var设置：

var count = $("#gallery li:visible").length;
alert(count);

这会找到页面上当前可见的所有图库li。当分页被触发时，数字会发生变化，因为人们可以选择类别。

我希望能够使用此count来查看count的每个addClass和end_item的第3项（因为我连续3个））

我的HTML：

<ul id="gallery">
    <li class="gallery_image" data-id="" data-type="">
        <img src=""/><div class="thumb_bg"></div>
        <img src="" data-original="" />
    </li>
    <li class="gallery_image" data-id="" data-type="">
        <img src=""/><div class="thumb_bg"></div>
        <img src="" data-original="" />
    </li>
    <li class="gallery_image" data-id="" data-type="">
        <img src=""/><div class="thumb_bg"></div>
        <img src="" data-original="" />
    </li>
    <li class="gallery_image" data-id="" data-type="">
        <img src=""/><div class="thumb_bg"></div>
        <img src="" data-original="" />
    </li>
</ul>

目前正在尝试：

$('#gallery li').each( function(count) {
    if( count % 3 != 2 )
    return
    $(this).addClass('end')
})

我不会在页面上有3个，它可能是2到12之间的任何东西，所以我需要找到目前可见的第3个项目

修改我的代码似乎工作...但只有当页面首次加载时。如果我在我的图库中使用过滤器项目，则代码会计算隐藏的项目，即使我在点击过滤器后重新调用jQuery也是如此。

Answer 1

试一试：

FIDDLE

$('#gallery li:visible').each(function(i) { 
    if (i % 3 == 2) $(this).addClass('end_item');
});

当你加载更多时，请务必这样做：

$('.end_item').removeClass('end_item');
//then execute code from above

Answer 2

我错过了，但可能有用（将来）

$('#gallery li:visible').filter(function(i){ return i % 3 == 2; }).addClass('end');

DEMO.

Answer 3

$('#gallery li:visible').each( function(count) {
      if( (count + 1) % 3 == 0 ) {
        $(this).addClass('end');
      }
});

http://jsfiddle.net/mGZmy/1/

use：可见变量，仅定位那些项目

3 个答案: