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

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 7 10 如果用戶將 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事件並在父div jQuery 集合上應用sort方法。 請注意，我添加了 class 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>