Textfelder neu anordnen, die auf der vom Benutzer eingegebenen Nummer basieren

Question

Ich habe wenige Eingaben und es werden Werte von 1 bis 100 eingegeben, aber der Benutzer kann diese Werte ändern. Ich habe meine Eingaben in aufsteigender Reihenfolge sortiert. Jetzt möchte ich, dass jedes Mal, wenn Benutzer eine Eingabe ändert, sie in aufsteigender Reihenfolge neu angeordnet werden sollten. Hier ist mein HTML-Template:

var sortedArray = $("div[class^='wrap_']").get().sort(function(a, b) { 
 
    var idx = parseInt($(a).find(".sort_by").val(),10); 
 
    var idx2 = parseInt($(b).find(".sort_by").val(),10); 
 
    return idx > idx2; 
 
}); 
 
$(sortedArray).appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrap_0"> 
 
<input class="sort_by" value="10"/> 
 
</div> 
 
<div class="wrap_1"> 
 
    <input class="sort_by" value="3"/> 
 
</div> 
 
<div class="wrap_2"> 
 
    <input class="sort_by" value="7"/> 
 
</div>

Im Moment erscheinen sie als: wenn Benutzer ändert 3 bis 12, ich meine ausgegeben werden soll automatisch geändert werden: 7 10 12. Ich möchte nur Jquery-Lösungen. Danke im Voraus.

Answer 1

$(document).ready(function(){ 
 
    sort(); 
 
    $(".sort_by").change(function(){ 
 
    sort(); 
 
    }); 
 
    function sort(){ 
 
    var sortedArray = $("div[class^='wrap_']").get().sort(function(a, b) { 
 
    var idx = parseInt($(a).find(".sort_by").val(),10); 
 
    var idx2 = parseInt($(b).find(".sort_by").val(),10); 
 
    return idx > idx2; 
 
}); 
 
    console.log(sortedArray); 
 
$(sortedArray).appendTo("body"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrap_0"> 
 
    <input class="sort_by" value="10"/> 
 
</div> 
 
<div class="wrap_1"> 
 
    <input class="sort_by" value="3"/> 
 
</div> 
 
<div class="wrap_2"> 
 
    <input class="sort_by" value="7"/> 
 
</div>

Es ... Sie einen Wert ein und drücken Sie ... Ihre Art ändern Code ausgeführt wird.

Answer 2

Sie können das input-Ereignis verwenden und die sort-Methode auf die übergeordnete div jQuery-Auflistung anwenden. Bitte beachten Sie, dass ich die Klasse wrap hinzugefügt habe, damit die divs einfach ausgewählt werden können. Der Code .trigger('input') stellt sicher, dass die Elemente input (tatsächlich übergeordnete Elemente div) beim Laden der Seite sortiert werden.

$(function() { 
 
    $('.sort_by').on('focusout', function() { 
 
     var arr = $('div.wrap'); 
 
     arr = arr.sort(function(a,b) { 
 
      return +$(a).find('.sort_by').val() - +$(b).find('.sort_by').val(); 
 
     }); 
 
     $('body').append(arr); 
 
    }) 
 
    .trigger('focusout'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap_0 wrap"> 
 
    <input class="sort_by" value="10"/> 
 
</div> 
 
<div class="wrap_1 wrap"> 
 
    <input class="sort_by" value="3"/> 
 
</div> 
 
<div class="wrap_2 wrap"> 
 
    <input class="sort_by" value="7"/> 
 
</div>