Question

Another jQuery thing for you that I’m scratching my head over.
I have some floated divs (shown below) that are turned on and off using jQuery.
I need to append some bits after every third child element that does not have a style of display:none.

<div class="ItemList">
    <div class="Item">A</div>
    <div class="Item" style="display:none;">B</div>
    <div class="Item">C</div>
    <div class="Item">D</div>
    <div class="Item" style="display:none;">E</div>
    <div class="Item">F</div>
    <div class="Item">G</div>
    <div class="Item">H</div>
    <div class="Item">I</div>
    <div class="Item" style="display:none;">J</div>
    <div class="Item">K</div>
    <div class="Item">L</div>
    <div class="Item">M</div>
    <div class="Item">N</div>
</div>

I have come up with this but it isn’t right!

$(".Item[style*='display: block']:nth-child(3n)").after("<div class='Clear'></div>");

Any ideas?!

Answer 1

I’m not sure if you need the elements filtered before you select the .Item elements or after.

After elements are selected.

$(".Item:nth-child(3n)").filter(function(){
     return $(this).css("display") != "none";
}).after("<div class='Clear'></div>");

@undefined has a really good answer too.