jquery - 使用 jQuery 按前导数字格式化选择列表

Question

我有一个选择框，见下文。输出来 self 们无法更改的地址系统。我希望格式按数字顺序排列，即 1 Smith Road、3 Smith Road、5 Smith Road 等...

我一直在使用以下脚本来解决这个问题，我可以看到 parseInt 正在将字符串转换为数字，执行正确的排序，但删除了地址的最后一部分。所以我在输出中只得到 1、2、3 等。

$(function() {
    var opAddress = [];
    $('option').each(function() {
      opAddress.push(parseInt($(this).text(), 10));
    });
    opAddress.sort(numOrdDesc);
    $('option').each(function() {
      $(this).text(opAddress.pop());
    });
  });

  function numOrdDesc(a, b) {
    return (b - a);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select>
    <option>1 Smith Road</option>
    <option>10 Smith Road</option>
    <option>11 Smith Road</option>
    <option>12 Smith Road</option>
    <option>3 Smith Road</option>
    <option>5 Smith Road</option>
</select>

任何想法，任何人都可以指出我文档等的正确方向吗？

Answer 1

你把这个问题搞得太复杂了一点。您可以在 jQuery 对象上调用 sort()，同时提供排序依据的逻辑。由于每个选项的文本都以数字开头，因此您只需对其调用 parseInt() 即可获取要排序的数值，而无需更新元素的属性。试试这个:

$(function() {
  var $select = $('select');
  var $option = $select.find('option').sort(function(a, b) {
    return parseInt($(a).text(), 10) - parseInt($(b).text(), 10);
  }).appendTo($select).first().prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select>
  <option>1 Smith Road</option>
  <option>10 Smith Road</option>
  <option>11 Smith Road</option>
  <option>12 Smith Road</option>
  <option>3 Smith Road</option>
  <option>5 Smith Road</option>
</select>