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

Answer 1

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.

Answer 2

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);
    });
   });

Answer 3

Try this:

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