jQuery insertAfter最后一项

Question

我有：

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

点击a.blah后，我需要在父级 <div class="new">xxx</div>之后的.reply附加.main之类的内容，这意味着它应该找到最新的.reply agter a.blah的父级，它不应该交叉到另一个.main，这是我编码的（但不能正常工作）：

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

我该如何解决这个问题？ 感谢

Answer 1

基于评论

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

演示：Fiddle

1. .closest()找到与选择器匹配的直接祖先
2. .nextUntil()查找当前.reply之后的所有.main元素，但没有.main没有.reply
3. .addBack()添加回当前的父级，如果下一个.main不是.reply
4. .last()找到匹配集
中的最后一个元素
5. .after()在匹配的元素集
之后插入传递的元素

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