Sortierfelder basierend auf ihren Werten (in bestimmter Reihenfolge)

Question

Ich habe Kontrollkästchen, die in einer bestimmten Reihenfolge von einem Wordpress-Plugin platziert werden.

Der erzeugte HTML-Code sieht wie folgt aus:

<div class="wpgmza_filter_container" id="wpgmza_filter_container_5"> 
     <div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5"> 
      <div class="wpgmza_cat_checkbox_item_holder_first"> 
       <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0"> 
       <div> 
        <label for="wpgmza_cat_checkbox_0">All</label> 
       </div> 
      </div> 
      <div class="wpgmza_cat_checkbox_item_holder"> 
       <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_2" name="wpgmza_cat_checkbox" mid="5" value="2"> 
       <div> 
        <label for="wpgmza_cat_checkbox_2">Airco</label> 
       </div> 
      </div> 
      <div class="wpgmza_cat_checkbox_item_holder"> 
       <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_3" name="wpgmza_cat_checkbox" mid="5" value="3"> 
       <div> 
        <label for="wpgmza_cat_checkbox_3">Vent</label> 
       </div> 
      </div> 
      <div class="wpgmza_cat_checkbox_item_holder"> 
       <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_5" name="wpgmza_cat_checkbox" mid="5" value="5"> 
       <div> 
        <label for="wpgmza_cat_checkbox_5">Sun</label> 
       </div> 
      </div> 
      <div class="wpgmza_cat_checkbox_item_holder"> 
       <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_1" name="wpgmza_cat_checkbox" mid="5" value="1"> 
       <div> 
        <label for="wpgmza_cat_checkbox_1">One</label> 
       </div> 
      </div> 
     </div> 
    </div> 

Der folgende Code Sorten basieren (von hoch zu niedrig) basierend auf dem Wert:

function sortByID(a, b) 
{ 
return (a.children(“input”).val() > b.children("input").val()) ? 1 : -1; 
} 

var container = jQuery("div.wpgmza_filter_container"); 
container.children("div").sort(sortByID).appendTo(container); 

Ist es möglich, sie auf ein sortieren basierend Liste von Werten, die ich definiere? Ich möchte, dass sie in dieser Reihenfolge (wertebasiert) angezeigt werden: 3,5,0,1,2

Answer 1

Um nicht sequenziell angegebene Elemente zu sortieren, können Sie die Reihenfolge in einem Array angeben und dann Vergleichen Sie die indexOf() der angegebenen Werte in diesem Array.

Unter meine Antwort auf Ihre previous question, können Sie die Logik wie folgt erweitern:

function sortByValue(a, b) { 
 
    var aVal = parseInt($(a).find('input').val(), 10), 
 
    bVal = parseInt($(b).find('input').val(), 10); 
 
    return order.indexOf(aVal) > order.indexOf(bVal); 
 
} 
 

 
var order = [3, 5, 0, 1, 2]; 
 
var $container = $("div.wpgmza_cat_checkbox_holder"); 
 
$container.children("div").sort(sortByValue).appendTo($container);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="wpgmza_filter_container" id="wpgmza_filter_container_5"> 
 
    <div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5"> 
 
    <div class="wpgmza_cat_checkbox_item_holder_first"> 
 
     <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0"> 
 
     <div> 
 
     <label for="wpgmza_cat_checkbox_0">All</label> 
 
     </div> 
 
    </div> 
 
    <div class="wpgmza_cat_checkbox_item_holder"> 
 
     <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_2" name="wpgmza_cat_checkbox" mid="5" value="2"> 
 
     <div> 
 
     <label for="wpgmza_cat_checkbox_2">Airco</label> 
 
     </div> 
 
    </div> 
 
    <div class="wpgmza_cat_checkbox_item_holder"> 
 
     <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_3" name="wpgmza_cat_checkbox" mid="5" value="3"> 
 
     <div> 
 
     <label for="wpgmza_cat_checkbox_3">Vent</label> 
 
     </div> 
 
    </div> 
 
    <div class="wpgmza_cat_checkbox_item_holder"> 
 
     <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_5" name="wpgmza_cat_checkbox" mid="5" value="5"> 
 
     <div> 
 
     <label for="wpgmza_cat_checkbox_5">Sun</label> 
 
     </div> 
 
    </div> 
 
    <div class="wpgmza_cat_checkbox_item_holder"> 
 
     <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_1" name="wpgmza_cat_checkbox" mid="5" value="1"> 
 
     <div> 
 
     <label for="wpgmza_cat_checkbox_1">One</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>