JQuery nth-child selector only works with :nth-child(1)

Question

I am trying to insert something after every 4th div, this is my Jquery for it:

$( "<p>Test</p>" ).insertAfter(".top-car-img :nth-child(4n)");

However, this is not working. But if i replace the 4n with a 1 , then it works and every element gets the p-tag. Why doesn`t it work when i try it with every 4th element?

Answer 1

 $(function() { $("<p>Test</p>").insertAfter('.top-car-img:nth-of-type(4n)'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="top-car-img" title="1" src=""/> <img class="top-car-img" title="2" src=""/> <img class="top-car-img" title="3" src=""/> <img class="top-car-img" title="4" src=""/> <img class="top-car-img" title="5" src=""/> <img class="top-car-img" title="6" src=""/> <img class="top-car-img" title="7" src=""/> <img class="top-car-img" title="8" src=""/> <img class="top-car-img" title="9" src=""/> <img class="top-car-img" title="10" src=""/>

Answer 2

You have to remove the space between the element and the child.

Example:

$( "<p>Test</p>" ).insertAfter(".top-car-img:nth-child(4n)");

Codepen: http://codepen.io/anon/pen/XdMLyq