0

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.

Janessa Bautista
  • 294
  • 1
  • 13
  • Can you create a runable snippet that demonstrates the issue? As it is, this could be caused by the HTML you have. – freedomn-m Aug 19 '19 at 15:29
  • 2
    Possible duplicate of [Switch positions of 2 divs with jQuery](https://stackoverflow.com/questions/9030322/switch-positions-of-2-divs-with-jquery) – Nico Haase Aug 19 '19 at 15:35

2 Answers2

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>");
    }
}
Kavelin
  • 397
  • 1
  • 11
0

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

Noel Schenk
  • 724
  • 1
  • 8
  • 19