Question

我想按顺序获取seq属性，但是如下所示请帮助我。我正在使用此代码对这些选项进行排序。

＆＃13;

$("#Grade").html($("#Grade option").sort(function(a, b) {
  return $(a).attr("seq") == $(b).attr("seq") ? 0 : $(a).attr("seq") < $(b).attr("seq") ? -1 : 1
}))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="domFilter" id="Grade">
  <option value="" disabled="" selected="" seq="-18">Select your option</option>
  <option value="253802" seq="1">I</option>
  <option value="253811" seq="10">X</option>
  <option value="253812" seq="11">XI</option>
  <option value="253813" seq="12">XII</option>
  <option value="253803" seq="2">II</option>
  <option value="253804" seq="3">III</option>
  <option value="253805" seq="4">IV</option>
  <option value="253806" seq="5">V</option>
  <option value="253807" seq="6">VI</option>
  <option value="253808" seq="7">VII</option>
  <option value="253809" seq="8">VIII</option>
  <option value="253810" seq="9">IX</option>
</select>

＆＃13;

Answer 1

Use a subtraction, which will automatically convert your attribute value to a number. Without this conversion you sort by string value.

Suggested improvement: instead of (silently) converting the list to HTML and providing it to the html method, use detach().appendTo(), which does not need this HTML conversion, but works with the HTML elements. With an additional .parent().val("") you also clear the selection that would otherwise be set to the last element.

$("#Grade option").sort(function (a, b) {
    return $(a).attr("seq") - $(b).attr("seq");
}).detach().appendTo('#Grade').parent().val("");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="domFilter" id="Grade">
        <option value="" disabled="" selected="" seq="-18">Select your option</option>
        <option value="253802" seq="1">I</option>
        <option value="253811" seq="10">X</option>
        <option value="253812" seq="11">XI</option>
        <option value="253813" seq="12">XII</option>
        <option value="253807" seq="6">VI</option>
        <option value="253808" seq="7">VII</option>
        <option value="253809" seq="8">VIII</option>
        <option value="253803" seq="2">II</option>
        <option value="253804" seq="3">III</option>
        <option value="253805" seq="4">IV</option>
        <option value="253806" seq="5">V</option>
        <option value="253810" seq="9">IX</option>
</select>

Answer 2

问题是你在一个不在数字上的字符串上排序所以你应该在sort方法中获得seq属性后parseInt

$（a）.attr（“seq”）将返回字符串“10”

$("#Grade").html($("#Grade option").sort(function (a, b) {
    return $(a).attr("seq") == $(b).attr("seq") ? 0 : parseInt($(a).attr("seq")) < parseInt($(b).attr("seq")) ? -1 : 1
}))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="domFilter" id="Grade">
        <option value="" disabled="" selected="" seq="-18">Select your option</option>
        <option value="253802" seq="1">I</option>
        <option value="253811" seq="10">X</option>
        <option value="253812" seq="11">XI</option>
        <option value="253813" seq="12">XII</option>
        <option value="253807" seq="6">VI</option>
        <option value="253808" seq="7">VII</option>
        <option value="253809" seq="8">VIII</option>
        <option value="253803" seq="2">II</option>
        <option value="253804" seq="3">III</option>
        <option value="253805" seq="4">IV</option>
        <option value="253806" seq="5">V</option>
        <option value="253810" seq="9">IX</option>
</select>

需要按顺序选择

2 个答案: