jQuery 在最后一项之后插入

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 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()将传递的元素插入到匹配的元素集之后