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.