javascript - 如何按两位数而不是一位数排序？

<分区>

$( document ).ready(function() {
    var options = $('select#myshp_search_field_7 option');
    var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });
});

所以这对我的选择字段进行了排序，但它只对第一个数字(数字)进行排序>

<select id='myshp_search_field_7'>
    <option value='10'>10</option>
    <option value='5'>5</option>
    <option value='3'>3 </option>
    <option value='11'>11 </option>
</select>

代码的结果是:10、11、3、5

但我希望它是:3、5、10、11

最佳答案

问题是因为您正在比较字符串值。要更正此问题，请使用 parseInt() 将 sort() 逻辑中的值强制转换为整数:

arr.sort(function(o1, o2) {
  var o1t = parseInt(o1.t, 10), o2t = parseInt(o2.t, 10);
  return o1t > o2t ? 1 : o1t < o2t ? -1 : 0;
});

另请注意，您可以简化排序逻辑，因为您可以直接处理 option 元素本身，而无需首先 map() 来自它们的对象数组。试试这个:

$(document).ready(function() {
  $('#myshp_search_field_7 option').sort(function(a, b) {
    var aVal = parseInt($(a).val(), 10), bVal = parseInt($(b).val(), 10);
    return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
  }).appendTo('#myshp_search_field_7');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myshp_search_field_7">
    <option value="10">10</option>
    <option value="5">5</option>
    <option value="3">3</option>
    <option value="11">11</option>
</select>

关于javascript - 如何按两位数而不是一位数排序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42411612/

上一篇：html - 我可以在 HTML 代码中使用替代字形吗？

下一篇：javascript - 在不复制的情况下将现有的 ArrayBuffer 绘制到 Canvas 中

相关文章：

javascript - 屏幕上不断重复的动画

javascript - jQuery 无法删除 AJAX 上的多个相邻元素成功

java - Struts 2 JSON JQuery Grid 不点击 Action

html - 一些 img 标签的 last-of-type 问题

html - 未找到带有定位器的机器人框架元素

javascript - 如何从 Javascript 触发 iPhone 应用程序中方法的执行？

javascript - 如何一次取消订阅所有 Youtube channel ？

javascript - Ajax Jquery 和 php : How to control feedback?

javascript - 在进一步的 jQuery-ui 自动完成函数中使用 jQuery-ui 自动完成变量

html - 如何使用CSS获取网页的全高？