JQuery insert after last item

Question

I have:

<div class="main"> <a class="blah">blah1</a> </div> <div class="main"> <a class="blah">blah2</a> </div> <div class="main reply"> <a class="blah">blah3</a> </div> <div class="main reply"> <a class="blah">blah4</a> </div> <div class="main reply"> <a class="blah">blah5</a> </div> <div class="main"> <a class="blah">blah6</a> </div> <div class="main reply"> <a class="blah">blah7</a> </div> 

when clicking a.blah I need to add something like <div class="new">xxx</div> to the last .reply after the parent .main , this means that it should find the last .reply agter parent element of a.blah , and it should not cross another .main , this is what I encoded (but didn't work):

 $('.blah').on('click', function(){ var new_add = '<div class="new">xxx</div>'; $(this).parents('div.main').next('.main:last').append(new_add); }); 

How can I fix this? Thanks

Answer 1

Based on comments

 $('.blah').on('click', function(){ var new_add = '<div class="new">xxx</div>'; $(this).closest('.main').nextUntil('.main:not(.reply)').addBack().last().after(new_add); }); 

Demo: Fiddle

• . closeest () find the closest ancestor matching the selector
• . nextUntil () finds all .reply elements that go after the current .main without crossing through .main without .reply
• . addBack () adds back the current parent if the next .main not .reply
• . last () finds the last item from the matched set
• . after () inserts the passed item after the matched set of items

Answer 2

 $('.blah').on('click', function(){ var new_add = '<div class="new">xxx</div>'; $(this).parents('div.main').siblings('.main:last').append(new_add); }); 

Fiddle