jQuery - appendTo previous / preceding element

Question

I couldn't find this on here already, and am hoping somebody can help.

I need the link (.more) to be appended to the paragraph that precedes it - I'm sure this is simple enough, but can't quite get it right:

<p>Lorem ipsum</p>

<p>Lorem ipsum</p>

<p>Lorem ipsum</p>

<a href="#" class="more">Read more</a>

<p>Lorem ipsum</p>

There may be more paragraphs in the final HTML, the reason I need to do this is CMS-related. But based on the above, my aim would be:

<p>Lorem ipsum</p>

<p>Lorem ipsum</p>

<p>Lorem ipsum <a href="#" class="more">Read more</a></p>

<p>Lorem ipsum</p>

I've tried:

$(".more").appendTo("p");

But obviously this will append it to all paragraphs... perhaps this is a job for prevAll, but I can't quite put my finger on it.

Many thanks in advance for your help!

The Alpha · Accepted Answer · 2012-04-21T17:00:24.317

6

HTML

<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<a href="#" class="more">Read more1</a>
<p>Lorem ipsum</p>
<a href="#" class="more">Read more2</a>

JS

$('p').each(function(e){
    if($(this).next('a').hasClass('more'))
       $(this).html($(this).html()+" ").append($(this).next('a')); 
});

Example1 and Example2 with multiple a tags.

edited Apr 21 '12 at 17:00

answered Apr 21 '12 at 16:53

The Alpha

143,660
29
287
307

Tobias Krogh · Answer 2 · 2012-04-21T17:02:11.073

2

try to use

var more = $(".more");
more.prev().append(" ").append(more);

edited Apr 21 '12 at 17:02

answered Apr 21 '12 at 16:49

Tobias Krogh

3,768
20
14

of course `$(".more")` catches all elements with class "more", but it fits to the given example – Tobias Krogh Apr 21 '12 at 17:01
I think so just wanted to make you notice. – The Alpha Apr 21 '12 at 17:04

jQuery - appendTo previous / preceding element

2 Answers2