CODEWITHSUNDEEP
jquery
Kobe Bryan
Kobe Bryan

Reputation: 317

How to swap div using Jquery

Newbie here. Would like to ask for help. How can I swap the 2 divs dynamically. When you flood click the button, it will just swap alternately. I've saw stackoverflow question but it didn't work.

$("button").click(function(){
    var v1 = $('.red').val(),
        v2 = $('.blue').val();
    $('.red').val(v2);
    $('.blue').val(v1);
});


$("button").click(function(){
    var v1 = $('.red').val(),
        v2 = $('.blue').val();
    $('.red').val(v2);
    $('.blue').val(v1);
});
.red {
  color: #fff;
  text-align: center;
  padding-top: 75px;
  box-sizing: border-box;
  width: 250px;
  height: 250px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

.blue {
  color: #fff;
  text-align: center;
  padding-top: 75px;
  box-sizing: border-box;
  width: 250px;
  height: 250px;
  background: blue;
  position: absolute;
  top: 20px;
  left: 20px;
}

button {
  margin-top: 300px;
  clear: both;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
I am red!
</div>

<div class="blue">
I am blue!
</div>

<button>Swap box!</button>

Here's my jsfiddle: https://jsfiddle.net/4jbdznpa/

Hope you have a little time to help me for my development.

Upvotes: 0

Views: 7509

Answers (4)

Jacobalo
Jacobalo

Reputation: 363

I updated your jsfiddle, it uses id instead of class. This will allow you to better 'switch' your divs.

https://jsfiddle.net/4jbdznpa/3/

HTML

<div id="red">
    I am red!
</div>

<div id="blue">
    I am blue!
</div>

<button>Swap box!</button>

Javascript

$("button").click(function(){
    var v1 = $('#red').html(),
        v2 = $('#blue').html();
    $('#red').html(v2);
    $('#blue').html(v1);
    $('#red').prop("id", "TEMP");
    $('#blue').prop("id", "red");
    $('#TEMP').prop("id", "blue");
});

CSS

#red {
    color: #fff;
    text-align: center;
    padding-top: 75px;
    box-sizing: border-box;
    width: 250px;
    height: 250px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
}

#blue {
    color: #fff;
    text-align: center;
    padding-top: 75px;
    box-sizing: border-box;
    width: 250px;
    height: 250px;
    background: blue;
    position: absolute;
    top: 20px;
    left: 20px;
}

button {
    margin-top: 300px;
    clear: both;
    display: block;
}

Let me know if this is what you were looking for.

Upvotes: 2

Varun Sharma
Varun Sharma

Reputation: 4842

I thing this is helpful for you. 

$("button").click(function(){
  if($(".holder >div:last-child").hasClass("current")){
     $(".holder >div:last-child").removeClass("current");
     $(".holder >div:first-child").addClass("current");
  }else{
     $(".current").removeClass("current").next().addClass("current");
  }
});
body {
    margin:0;
    padding:0;
}
.holder {
    width: 100px;
    height:100px;
    border:1px solid #000000;
}

.holder div {
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
    z-index:0; /*init z-index*/
}
.holder div.current{z-index:1;} /*only this DIV will be visible*/
.one {
    background:red;
}
.two {
    background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="holder">
    <div class="one current">1</div>
    <div class="two">2</div>
    
</div>
<button>click</button>

Upvotes: 0

Satpal
Satpal

Reputation: 133453

You can wrap the div elements in a container then on button click prepend the last div element to parent. Style the elements based on there position in the parent container.

jQuery(function($) {
  $("button").click(function() {
    $('.container div:last').prependTo('.container');
  });

});
.container div {
  box-sizing: border-box;
  width: 250px;
  height: 250px;
  text-align: center;
  padding-top: 75px;
  position: absolute;
  color: #fff;
}
.container div:first-child {
  top: 0px;
  left: 0px;
}
.container div:last-child {
  top: 20px;
  left: 20px;
}
.container div.red {
  background: red;
}
.container div.blue {
  background: blue;
}
button {
  margin-top: 300px;
  clear: both;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="red">
    I am red!
  </div>

  <div class="blue">
    I am blue!
  </div>
</div>

<button>Swap box!</button>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337733

To swap the elements the easiest way would be to use CSS to style the elements based on a combination of their position in the parent and class names. You can then use jQuery to just swap them in the DOM. Something like this:

$("button").click(function() {
    $('div:eq(0)').insertAfter('div:eq(1)')
});
div {
    color: #fff;
    text-align: center;
    padding-top: 75px;
    box-sizing: border-box;
    width: 100px; /* size amended to fit in snippet better */
    height: 100px; /* size amended to fit in snippet better */
    position: absolute;
}
div.red {
    background: red;
}
div.blue {
    background: blue;
}
div:nth-of-type(1) {
    top: 0;
    left: 0;
}
div:nth-of-type(2) {
    top: 20px;
    left: 20px;
}

button {
    margin-top: 150px;
    clear: both;
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
    I am red!
</div>

<div class="blue">
    I am blue!
</div>

<button>Swap box!</button>

Upvotes: 0

Related Questions