Jquery selecting every 12th visible element

Question

As the title says, how do I select every 12th element which is visible? I've tried searching for it in these ways:

$("#content_div > div > img:nth-child(12n):visible").after("<div></div>");
$("#content_div > div > img:visible:nth-child(12n)").after("<div></div>");

None of the ways worked

Do you want every 12th element or every 8th? Your question says 8th but the title and code indicate 12th. And, can you add a sample of the markup you're trying to use this on? — Drew Gaynor, Dec 02 '14 at 19:03
I would recommend trying the modulus approach noted in the answer [here](http://stackoverflow.com/questions/2175694/jquery-nth-child-that-is-currently-visible) if you are having trouble. That answer also answers your question to your approach. — ian, Dec 02 '14 at 19:03
The correct answer is deleted, though it was just a link to this thread: http://stackoverflow.com/questions/2175694/jquery-nth-child-that-is-currently-visible Thanks to that mysterious comment. — dnccc12333, Dec 02 '14 at 19:27

score 0 · Accepted Answer · answered Dec 02 '14 at 19:36

$("#content_div > div > img:visible:nth-of-type(12n)").after("<div></div>")

See :nth-of-type() Selector

$.each(new Array(36), function() {
  $("#content_div > div").append(
    $("<img>")
  )
});

$("#content_div > div > img:visible:nth-of-type(12n)").after("<div>visible</div>")

img {
  width:50px;
  height:50px;
  background:navy;
  padding:1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content_div">
 <div></div>
</div>

Jquery selecting every 12th visible element

1 Answers1