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

Question

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>

Looks like a duplicate: https://stackoverflow.com/questions/9030322/switch-positions-of-2-divs-with-jquery — rmalviya, Oct 29 '18 at 07:39
Please be careful, `$('#swapper-other').each(...)` is wrong, IDs on page have to be unique. So, use classes instead and also bind to `body` this way: `$('body').on('click', '.swapper-other', function(e) { ... });` — skobaljic, Oct 29 '18 at 07:41

score 2 · Answer 1 · answered Oct 29 '18 at 07:44

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>

Patrick Schocke · Answer 2 · 2018-10-29T07:57:20.870

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!

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

2 Answers2