javascript - use :visible variable to target only those items -

the problem: have jquery var setup so:

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

this finds gallery li's visible on page. number changes when pagination triggered, people can select categories.

i want able use count @ 3rd item of every count , addclass of end_item (as have 3 in row)

my 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> 

currently trying:

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

i not going have 3 on page, 2 - 12, need find every 3rd item visible

edit: code seems work... when page first loads. if use filter item on gallery, code counting hidden items, though re-calling jquery once filter clicked.

give shot:

fiddle

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

when load more, sure this:

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