Move multiple elements position relative to another element with jQuery

Question

I have multiple of the following elements:

<div class="item">
    <div class="image">Image</div>
    <div class="text">Text</div>
</div>

And what I need to do in jQuery is to swap them around, so that the text div is displayed before the image div.

This works fine using $('.text')insertBefore('.image') - but this doesn't work when I have multiple item divs.

They all need to be switched at the same time, is there any way to do this?

JSFiddle: https://jsfiddle.net/n2vnpd3n/

Pranav C Balan · Accepted Answer · 2016-09-13T14:08:27.240

Iterate and insert based on the adjacent element.

$("#switch").click(function() {
  // iterate over text
  $('.text').each(function() {
     // insert before the immediate previous sibling
     $(this).insertBefore($(this).prev());
     // or $(this).prev().before(this);
  });
});

$("#switch").click(function() {
  $('.text').each(function() {
    $(this).prev().before(this);
  });
});

body {
  background-color: #d6e6e9;
  font-family: Helvetica;
  text-align: center;
}
.item {
  margin-bottom: 10px;
}
.image {
  background-color: #87d6e6;
  padding: 30px;
}
.text {
  background-color: #fff;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="switch" value="Switch" />
<br />
<br />
<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

Or using before() method with callback.

$("#switch").click(function() {
  // iterate over image and insert before
  $('.image').before(function() {
    // get the immediately next sibling element 
    return $(this).next()
  });
});

$("#switch").click(function() {
  $('.image').before(function() {
    return $(this).next()
  });
});

body {
  background-color: #d6e6e9;
  font-family: Helvetica;
  text-align: center;
}
.item {
  margin-bottom: 10px;
}
.image {
  background-color: #87d6e6;
  padding: 30px;
}
.text {
  background-color: #fff;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="switch" value="Switch" />
<br />
<br />
<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

This works, but assumes there are no other divs in the 'item' block. — PoeHaH, Sep 13 '16 at 14:04
Perfect! That's exactly what I was looking for. I knew it was possible using **.prev()** but didn't think to iterate it! — Tom Harris, Sep 13 '16 at 14:06

score 0 · Answer 2 · answered Sep 13 '16 at 14:02

0

Try this code :

$("#switch").click(function(){
    $('.text').each(function(){
    $(this).insertBefore($(this).parent().find('.image'));
  });   
});

answered Sep 13 '16 at 14:02

Sylvain B

550
3
9

score 0 · Answer 3 · answered Sep 13 '16 at 14:03

You can iterate over each item and then do the switch. I've adapted your code:

    $("#switch").click(function(){
     $('.item').each(function(i,e){
       $e = $(e);
       $e.find('.text').insertBefore($e.find('.image'));
     });
   });

And the Fiddle:

https://jsfiddle.net/n2vnpd3n/2/

score 0 · Answer 4 · edited May 23 '17 at 11:51

possible duplicate of jQuery reversing the order of child elements

snippet below using jquery .each() to cycle through your .items

$("#switch").click(function(){
 $('.item').each(function(){
    var list = $(this);
    var listItems = list.children();
    list.append(listItems.get().reverse());
  });
});

body {
  background-color: #d6e6e9;
  font-family: Helvetica;
  text-align: center;
}
.item {
  margin-bottom: 10px;
}
.image {
  background-color: #87d6e6;
  padding: 30px;
}
.text {
  background-color: #fff;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<input type="button" id="switch" value="Switch" />
<br />
<br />
<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

<div class="item">
  <div class="image">Image</div>
  <div class="text">Text</div>
</div>

Move multiple elements position relative to another element with jQuery

4 Answers4