javascript - 使用 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 detach方法。它删除了对象但保留了数据。像这样使用它:

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