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

on click of a.blah, I need to append something like <div class="new">xxx</div> to the latest .reply after the parent .main, it means it should find the latest .reply agter the parent of the a.blah, and it should not cross to another .main, here is what I coded (but not working):

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

How should I fix this? Thanks

@Barmar it is class in my real code, here I made it simple and forgot about it, and I fixed the `.reply_comment`, it's `.main` — behz4d, Jul 02 '13 at 08:00
I edited your HTML to number the blahs. Can you explain what you want to happen when you click on each of them? Where should xxx go in each case? — Barmar, Jul 02 '13 at 08:11
OK, on click of `.blah`(2), the `new_add` should be inserted after `blah 5` — behz4d, Jul 02 '13 at 08:13
@ArunPJohny your code inserts `new_add` into the last `.reply`, this should be inserted AFTER it. thanks — behz4d, Jul 02 '13 at 08:14
@behz4d in that case http://jsfiddle.net/arunpjohny/msp75/5/ use `.after()` instead of `.append()` — Arun P Johny, Jul 02 '13 at 08:15
@ArunPJohny it worked perfectly, please add an answer so I could mark it, thanks — behz4d, Jul 02 '13 at 08:18

Arun P Johny · Accepted Answer · 2013-07-02T08:24:18.407

Based on the 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

.closest() find the immediate ancestor matching the selector
.nextUntil() finds all the .reply elements coming after the current .main without crossing over a .main without .reply
.addBack() adds back the current parent, incase the next .main is not .reply
.last() finds the last element from the matched set
.after() inserts the passed element after the matched set of element

score 0 · Answer 2 · answered Jul 02 '13 at 08:02

0

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

FIDDLE

answered Jul 02 '13 at 08:02

Barmar

741,623
53
500
612

Wouldn't this also add to a previous comment? – casraf Jul 02 '13 at 08:02
Yes, it would. Your question didn't mention anything about that. – Barmar Jul 02 '13 at 08:05
this goes to the last .main and add it there, this should be before the another main and after `$(this).parent('.main').last(.reply)` – behz4d Jul 02 '13 at 08:06
Sorry, I based it on your code, not your words. I don't know how to get to the latest reply without crossing over into another main. – Barmar Jul 02 '13 at 08:08

jQuery insertAfter last item

2 Answers2

Linked