insertAfter within a loop

Question

I have some code generated by a CMS:

<div class="block">
  <a class="link" href="#">Link</a>
  <h4>Header here</h4>
  <div class="text">Some text here</div>
</div>

and I need to move the link to after the text div. I have tried this:

$(document).ready(function() {
        $('.block').each(function() {
            $('.block a.link').insertAfter('.block div.text');                      
        });
    });

but this only results in links being repeated about 10 times (the number of times looped.

I tried using $(this) but I don't quite understand how to write the correct syntax to append the a.link within the function... like this:

 $(this).a.link.insertAfter($(this).div.text);

score 8 · Accepted Answer · answered Jul 28 '11 at 14:53

8

Something like this should work, using siblings and after:

$('.block a.link').each(function() {
    $(this).siblings('.text').after(this);
});

That says "for each element matched, find the element that matches .text and insert the original element after it".

Alternatively, you could do this:

$('.block a.link').each(function() {
    $(this).parent().append(this);
});

This presumes that you want to put the element at the end of the div.block.

answered Jul 28 '11 at 14:53

lonesomeday

233,373
50
316
318

Thanks @lonesomeday - I think putting it to the end of the block div is a better idea. – AndyiBM Jul 28 '11 at 18:12

score 1 · Answer 2 · answered Jul 28 '11 at 14:53

1

You could do (if you want it after the div with class text):

$(document).ready(function() {
    $('.block a').each(function(){
       $(this).next('div.text').after(this);
    });
   });

or (if you want it after the div with class block)

$(document).ready(function() {
    $('.block a').each(function(){
       $(this).closest('div.block').after(this);
    });
   });

answered Jul 28 '11 at 14:53

Nicola Peluchetti

76,206
31
145
192

Thanks @Nicola Peluchetti - I don't want it after the block, but it's good to know how to do this. – AndyiBM Jul 28 '11 at 18:12

score 1 · Answer 3 · answered Jul 28 '11 at 14:53

1

Try this:

$(document).ready(function() {
            $('.block').each(function() {
                var divtext = $('div.text', this)
                $('a.link', this).insertAfter(divText);
            });
});

answered Jul 28 '11 at 14:53

Chandu

81,493
19
133
134

Thank @Cybernate - another method I didn't know. – AndyiBM Jul 28 '11 at 18:13

score 0 · Answer 4 · answered Jul 28 '11 at 14:54

0

Try this

$('div.block a.link').each(function() {
    $(this).siblings('div.text').after(this);
});

answered Jul 28 '11 at 14:54

ShankarSangoli

69,612
13
93
124

insertAfter within a loop

4 Answers4