Question

我输入的数量很少，而且它的值为1到100，但用户可以更改这些值。我已按升序排序输入。现在我希望每次用户更改输入时，都应按升序重新排列。这是我的HTML模板：

＆＃13;

 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");

＆＃13;

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

＆＃13;

现在它们显示为： 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事件并在父sort jQuery集合上应用div方法。请注意，我添加了课程wrap，因此可以轻松选择div。代码.trigger('input')可确保在页面加载时对input（实际为父div）元素进行排序。

＆＃13;

$(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');
});

＆＃13;

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

＆＃13;

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

2 个答案: