How to move multiple DOM elements using jQuery?

Question

I have the following code:

<div class="product">
    <div class="description"></div>
    <div class="image"></div>
</div>

<div class="product">
    <div class="description"></div>
    <div class="image"></div>
</div>

<div class="product">
    <div class="description"></div>
    <div class="image"></div>
</div>

And Im trying to select all .image elements and move them before each .product element.

When I use the following command, it takes all the images and moves them before the first .product. Im stuck, I tried a foreach - that didnt seem to work.

$('.product').before($('.image'));

Any ideas?

David Thomas · Accepted Answer · 2012-06-19 21:18:09Z

14

I'd suggest:

$('.image').each(
    function(){
        $(this).insertBefore($(this).closest('.product'));
    });

JS Fiddle demo.

References:

answered Jun 19, 2012 at 21:18

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

simo · Accepted Answer · 2012-06-19 21:44:38Z

4

I think this may work too:

$('.product').each(function (index) {
    $(this).before($('.image').eq(index));
});

edited Jun 19, 2012 at 21:44

answered Jun 19, 2012 at 21:24

simo

15.5k7 gold badges49 silver badges62 bronze badges

1 Comment

David Thomas Over a year ago

I'm having trouble visualising how that works...off to the docs for me! Also, welcome to Stack Overflow, and may I offer you your first +1? =)

Collectives™ on Stack Overflow

How to move multiple DOM elements using jQuery?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related