使用ID交换两个DIV的位置

Question

i'm trying to change the position of two DIV'S in jquery, it seems that i may be a little confuse because it is already swapping position, but when it do, it duplicates the field.

i tried using insertBefore and insertAfter.

<div id="before_stops">                                         
   <li><span><img src="<?php echo base_url('assets/images/multi_stops.png') ?>" width="18px"height="18px"/></span>                                             
          <div class="verticalLine"></div>                                         
            <span class="text multi_non_append_stops"></span>                                               
             <br><br>                                            
    </li>                                    
 </div>                                         

<div id="multi_stops">                                           
   <span class="text multi">
     <li><span>
     <img src="<?php echo base_url('assets/images/EndPoint.png')?>" width="18px" height="18px"></span>
     <div class="verticalLine"></div>
    <br/><br>
    </li>
</span>
</div>

Here is my javascript code:

for (var i = 0; i < data.stops.length; i++) {
  if(value == "A" || value == "B"){
                        $('#multi_stops').insertBefore($('#before_stops'));
                        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
}else{
                        $('#multi_stops').insertAfter($('#before_stops'));
                        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
                    }
                }

what is happening is instead of having a output of

if the value is A or B

it should be <div id ="multi_stops"></div> <div id ="before_stops"><div>

but what is happening to me is <div id ="multi_stops"></div> <div id ="before_stops"><div> <div id ="multi_stops"></div>

else if the value is not A or B it should only be <div id ="before_stops"></div> <div id ="multi_stops"><div>

but what is happening is <div id ="before_stops"></div> <div id ="multi_stops"><div> <div id ="multi_stops"></div>

it is duplicating. what am i doing wrong here.

Answer 1

You need to copy the element, insert it after, then delete the first one. Or you would end up with duplicates. You could use jquerys detach method. It removes the object but it keeps the data. Use it like this:

for (var i = 0; i < data.stops.length; i++) {
    if (value == "A" || value == "B") {
        $('#multi_stops').detach().insertBefore($('#before_stops'));
        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
    } else {
        $('#multi_stops').detach().insertAfter($('#before_stops'));
        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
    }
}

Answer 2

Try this:

<div class="holder">
    <div id="before_stops"> 
    </div>
    <div id="multi_stops">  
    </div>
</div>

if(value == "A" || value == "B"){
    $("#before_stops").appendTo(".holder");
}else{
    $("#multi_stops").appendTo(".holder");
}

Live example: https://codepen.io/noelelias/pen/bGbwwBz