Wie Position von HTML-Elementen ändern jquery mit

Question

ich folgende HTML haben:

<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> 

Zur Laufzeit ich nur die Etiketten an, die ich in meinem Array providerCodes

jQuery-Code erhalten

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

Jetzt möchte ich diese Etiketten in der Reihenfolge, in der ich in providerCodes erhalten. Zum Beispiel, wenn providerCodes Array CHARTER auf 0. Index und CABLEONE auf 1. Index enthalten, möchte ich die Position dieser Etiketten entsprechend ändern. Momentan wird CABLEONE zuerst und dann CHARTER angezeigt. Wie kann ich das in jQuery tun?

Answer 1

würde ich tun, um diese (vorausgesetzt, dass Sie die div Wähler für den Behälter haben):

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

Answer 2

Sie $.clone() zum ersten Klon alle versteckten div dann empty der Behälter dann Schleife durch Ihre Eingabe-Array verwenden können, und Befestigen Sie diese an den Container und machen Sie sie sichtbar. Schließlich fügen Sie alle verbleibenden div deren class ist nicht der Teil des Eingangsfeldes:

$(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>

Answer 3

Um die Elemente neu ordnen wir sie Index in das Array bekommen und legte sie vor diesem Index von .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(); 
    } 
} 

Demo: https://jsfiddle.net/IA7medd/srkbcdox/