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

Re-arrange Text Input fields based on Number entered by user

本文关键字：输入 排列 文本 字段 用户 数字 新排列      更新时间：2023-09-26

我有几个输入，它的值从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.710如果用户将3更改为12，我希望我的输出自动更改为:7、10、12、我只想要Jquery解决方案。

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

有…您更改一个值并按enter键…排序代码被执行。

您可以使用input事件，并将sort方法应用于父div jQuery集合。请注意，我添加了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>

相关文章：