使用ID交換兩個DIV的位置

Question

我正在嘗試更改jquery中兩個DIV的位置，似乎我可能有點困惑，因為它已經在交換位置，但是當這樣做時，它會重復該字段。

我嘗試使用insertBefore和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>

這是我的JavaScript代碼：

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>");
                    }
                }

發生的事情不是輸出

如果值為A或B

它應該是<div id ="multi_stops"></div> <div id ="before_stops"><div>

但是發生在我身上的是<div id ="multi_stops"></div> <div id ="before_stops"><div> <div id ="multi_stops"></div>

否則，如果該值不是A或B ，則應僅為<div id ="before_stops"></div> <div id ="multi_stops"><div>

但是發生了什么事<div id ="before_stops"></div> <div id ="multi_stops"><div> <div id ="multi_stops"></div>

它正在復制。 我在這里做錯了什么。

Answer 1

您需要復制元素，然后將其插入，然后刪除第一個。 否則您最終會重復。 您可以使用jquery 分離方法。 它刪除對象，但保留數據。 像這樣使用它：

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

嘗試這個：

<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");
}

實時示例： https ： //codepen.io/noelelias/pen/bGbwwBz