根据用户输入的数字重新排列文本输入字段

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>