jquery - target sibling of 'this', with nth-child -

i'm trying target nth sibling of clicked item. target next element nth(4n+4), able insert new element after that, kind of on "new line".

$("li").click(function () {     $(this).next('li:nth-child(4n+4)').after('<li class="full">new full width item</li>'); }); 

it's .next('li:nth-child(4n+4)') doesn't seem work.

it's bit hard explain, understand mean here: http://jsfiddle.net/hye7e/1/

this working fine, after() executed, when next li 4n+4 child. i.e. right start, work fine if click on 3 or on 7. right after clicked on 3, 7th 1 stop working , 6th 1 work instead, because 7 has become 8th element.

a bit clumsy update: http://jsfiddle.net/hye7e/3/

$("ul li:nth-child(4n)").addclass("last-in-line"); $("li").click(function () {     $(this).nextall("li.last-in-line").andself(".last-in-line").filter(":first").after('<li class="full">new full width item</li>'); }); 

andself(".last-in-line").filter(":first") ensure clicking on 4th, 8th, etc elements work.

update:

after discussion in comments, think have it: http://jsfiddle.net/hye7e/7/

with custom filter:

$("li").click(function () {     var myindex = $("li:not(.full)").index($(this)); // save our position in row     $(this)       .nextall("li:not(.full)")       .andself()       .filter(function(index){  // 4n'th lis 'not(.full)' set           return (index + myindex + 1) % 4 == 0;         })       .add("li:last")  // make sure last rows work       .first()         // add 'li' after first matching element       .after('<li class="full">new full width item</li>'); });