CODEWITHSUNDEEP
javascriptjqueryhtml
Raushan Singh
Raushan Singh

Reputation: 1110

How to swap two div respectively on button click using jquery?

I want to swap div on each click. But it swaps on only first click. 

function SwapDivsWithClick() {
  $('#swapper-other').each(function() {
    if (!$(this).text().match(/^\s*$/)) {
      $(this).insertBefore($(this).prev("#swapper-first"));
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
  <p style="margin:0; color:red;">
    This div displayed when the web page first loaded.
  </p>
</div>
<div id="swapper-other" style="display:block; border:2px dotted blue; padding:25px;">
  <p style="margin:0; color:blue;">
    This div displayed when the link was clicked.
  </p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
  <a href="javascript:SwapDivsWithClick()">(Swap Divs)</a>
</p>

Upvotes: 0

Views: 829

Answers (2)

Patrick Schocke
Patrick Schocke

Reputation: 1491

Here is a working example: the last div with the class swapIt is set before the first div with the class swapIt.

What I've done: I gave every div the class swapIt. In the function the last element (:last) with this class is getting pushed over the first element with the class (swapIt).

function SwapDivsWithClick() {
  $('.swapIt:last').insertBefore($('.swapIt:first'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" class="swapIt" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
     </p>
</div>
<div id="swapper-other" class="swapIt" style="display:block; border:2px dotted blue; padding:25px;">
    <p style="margin:0; color:blue;">
        This div displayed when the link was clicked.
    </p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
   <a href="javascript:SwapDivsWithClick()">(Swap Divs)</a>
</p>

The approach with classes has the advantage that you can have more than two divs and every time the button is clicked the last div gets pushed over the first. Even with 5, 7 or 10 this would still work!

Upvotes: 1

Mohammad
Mohammad

Reputation: 21489

You doesn't need to use .each() because your selector contain one element. So use bottom code.

Select #swapper-first and #swapper-other in one selector and get which one that is first using .first() and use .before() to inserting selected element before another.

function SwapDivsWithClick() {
    $('#swapper-first, #swapper-other').first().before(function(){
    	return $(this).next();
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" class="" style="display:block; border:2px dashed red; padding:25px;">
  <p style="margin:0; color:red;">
          This div displayed when the web page first loaded.
       </p>
  </div>
<div id="swapper-other" style="display:block; border:2px dotted blue; padding:25px;">
    <p style="margin:0; color:blue;">
        This div displayed when the link was clicked.
    </p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
   <a href="javascript:SwapDivsWithClick()">(Swap Divs)</a>
</p>

Upvotes: 2

Related Questions