jQuery insertAfter dernier élément

Question

Je:

<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> 

sur clic de a.blah, je dois ajouter quelque chose comme <div class="new">xxx</div> au dernier .reply après que le parent.main, cela signifie qu'il doit trouver la dernière .reply agter la mère du a.blah, et il ne devrait pas traverser à un autre .main, voici ce que je codé (mais ne fonctionne pas):

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

Comment dois-je résoudre ce problème? Merci

Answer 1

Sur la base des commentaires

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

Démo: Fiddle

1. .closest() trouver l'ancêtre immédiat correspondant au sélecteur
2. .nextUntil() trouve tous les .reply éléments qui viennent après la .main actuelle sans franchir une .main sans .reply
3. .addBack() recrédite le parent actuel, Incase la prochaine .main n'est pas .reply
4. .last() trouve le dernier élément du appariées
5. .after() insère l'élément passé après l'ensemble correspondant de l'élément

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