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

您需要复制元素，然后将其插入，然后删除第一个。否则您最终会重复。您可以使用jquerys 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>");
    }
}

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

使用ID交换两个DIV的位置

2 个答案: