根據用戶輸入的數字重新排列文本輸入字段

Question

我有很少的輸入，它帶有1到100的值，但用戶可以更改這些值。我已按升序對輸入進行排序。現在我希望每次用戶更改輸入時，都應該按照升序重新排列。 這是我的HTML模板：

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>

現在它們顯示爲：如果用戶更改3到12，我想我的輸出將被自動更改爲： 7 10 12. 我只想要Jquery解決方案。提前致謝。

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>

還有......你改變的值，然後按回車......執行你的排序代碼。

Answer 2

您可以使用input事件並在父divjQuery集合上應用sort方法。請注意，我添加了wrap類，因此可以輕鬆選擇div。代碼.trigger('input')可確保在頁面加載時對input（實際爲父div）元素進行排序。

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