如何使用 jquery 更改 HTML 元素的位置答案

【问题标题】：How to change position of HTML elements using jquery如何使用 jquery 更改 HTML 元素的位置
【发布时间】：2017-12-15 20:46:11
【问题描述】：

我有以下 HTML：

<div id="ServiceProvider" class="main_filter" name="filterDiv">
    <div class="filter_chkbox_div" style="display:none">
       <label class="ATT">AT&amp;T</label>
    </div>
    <div class="filter_chkbox_div" style="display:none">
       <label class="CABLEONE">Cable One</label>
    </div>
    <div class="filter_chkbox_div" style="display:none">          
       <label class="CABLEONEv6">Cable Onev6</label>
    </div>
    <div class="filter_chkbox_div" style="display:none">
        <label class="CHARTER">Charter</label>
    </div> 
</div>

在运行时，我只显示我在数组providerCodes 中收到的那些标签

jQuery 代码

for (var i = 0; i < providerCodes.length; i++) {
    var providerCheckBox = $("#" + providerCodes[i]);
    if (providerCheckBox.length > 0) {
        $(providerCheckBox).parent().show();
    }
}

现在我想按照我在providerCodes 中收到的顺序来放置这些标签。例如，如果providerCodes 数组在第 0 个索引上包含 CHARTER，在第一个索引上包含 CABLEONE，我想相应地更改这些标签的位置。目前，它将首先显示CABLEONE，然后显示CHARTER。如何在 jQuery 中做到这一点？

【问题讨论】：

可以分享providerCodes ??
@DharaParmar 对于我上面提到的示例，providerCodes 数组包含标签的类名。在这种情况下，它包含["CHARTER","CABLEONE"]

标签： jquery html css positioning

【解决方案1】：

我会这样做（前提是你有容器的 div 选择器）：

var containerSelector = $("<container-selector>");
for (var i = 0; i < providerCodes.length; i++) {
   var providerCheckBox = $("#" + providerCodes[i]);
   if (providerCheckBox.length > 0) {
       $(providerCheckBox).parent().show().detach().appendTo(containerSelector);
   }
}

【讨论】：

containerSelector 是什么意思？请检查我编辑的帖子，也许你的意思是指我刚刚添加的带有类main_filter的div？
是的，正是包含所有内部 div 的 div

【解决方案2】：

您可以使用$.clone() 首先克隆所有隐藏的div 然后empty 容器，然后遍历您的输入数组并将它们附加回容器并使它们可见。最后附上所有剩余的div，其class不是输入数组的一部分：

$(document).ready(function(){
  var providerCodes = ["CHARTER","CABLEONE "] ;
  var clonnedObject = $(".mycontainer").clone();
  $(".mycontainer").empty();
  for (var i = 0; i < providerCodes.length; i++) {
        var providerCheckBox = $(clonnedObject).find("." + providerCodes[i]);
        if (providerCheckBox.length > 0) {
            $(providerCheckBox).parent().appendTo(".mycontainer").show();
        }
    }
  $(clonnedObject).children().appendTo(".mycontainer");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="mycontainer">
  <div class="filter_chkbox_div" style="display:none">
   <label class="ATT">AT&amp;T</label>
</div>
<div class="filter_chkbox_div" style="display:none">
   <label class="CABLEONE">Cable One</label>
</div>
<div class="filter_chkbox_div" style="display:none">          
   <label class="CABLEONEv6">Cable Onev6</label>
</div>
<div class="filter_chkbox_div" style="display:none">
    <label class="CHARTER">Charter</label>
</div> 
</div>

【讨论】：

【解决方案3】：

为了对元素重新排序，我们将它们索引到数组中，并将它们放在.filter_chkbox_div的索引之前

var providerCodes = ["CABLEONEv6","CABLEONE"];
for (var i = 0; i < providerCodes.length; i++) {
  var providerCheckBox = $("." + providerCodes[i]);
  if (providerCheckBox.length > 0) {
    $('.filter_chkbox_div').eq(i).before(providerCheckBox.parent());
    providerCheckBox.parent().show();
  }
}

演示：https://jsfiddle.net/IA7medd/srkbcdox/

【讨论】：