Question

当list-items中的值为数字时，我在尝试对无序列表中的列表项进行排序时遇到问题。按字母顺序排序似乎不是答案，我不确定要更改什么以确保列表以正确的顺序显示。

当结果如下所示时出现问题，显然10不会在2之前出现：

1米
10米
2米

以下是我的代码，非常感谢任何帮助。

$(".filtersDropDown").each(function(){
    $(this).html($(this).children('li').sort(function(a, b){
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
    }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="specificationFiltersDropDown1047" class="filtersDropDown">
      <ul>
         <li class="selected">
            <a class="allFilterDropDownOptions">All</a>
         </li>
         <li>
            <a class="filterItemUnselected" data-option-id="1209">1 Meter (3ft)</a>
         </li>
         <li>
            <a class="filterItemUnselected" data-option-id="1288">10 Meter (33ft)</a>
         </li>
         <li>
            <a class="filterItemUnselected" data-option-id="1291">2 Meter (7ft)</a>
         </li>
      </ul>
   </div>

Answer 1

您可以使用parseInt()功能解决此问题。这会将字符数字转换为数字。

此外，您的代码中的错误很少我无法找到数据位置而您的排序没有.find('ul')。

希望这就是你要找的东西：）

＆＃13;

$(".filtersDropDown").each(function(){
    $(this).html($(this).find('ul').children('li').sort(function(a, b){
    var a = parseInt($(a).find('a').text().split(" ")[0]);
    var b = parseInt($(b).find('a').text().split(" ")[0]);
        return b < a ? 1 : -1;
    }));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="specificationFiltersDropDown1047" class="filtersDropDown">
      <ul>
         <li class="selected">
            <a class="allFilterDropDownOptions">All</a>
         </li>
         <li>
            <a class="filterItemUnselected" data-option-id="1209">1 Meter (3ft)</a>
         </li>
         <li>
            <a class="filterItemUnselected" data-option-id="1288">10 Meter (33ft)</a>
         </li>
         <li>
            <a class="filterItemUnselected" data-option-id="1291">2 Meter (7ft)</a>
         </li>
      </ul>
   </div>

＆＃13;

Answer 2

$(".filtersDropDown ul").each(function(){
  $(this).html($(this).find('li').sort(function(a, b){
  var a = parseInt($(a).find('a').text().match(/\d+/),10);
  var b = parseInt($(b).find('a').text().match(/\d+/),10);
  if(isNaN(a) || isNaN(b)){
    return 1;
  }
  return b < a ? 1 : -1;

  }));
});

我已经使用了正则表达式的parseInt并将if条件置于最重要的位置。希望你正在寻找这个。： - ）

  <div id="specificationFiltersDropDown1047" class="filtersDropDown">
  <ul>
     <li class="selected">
        <a class="allFilterDropDownOptions">All</a>
     </li>
     <li>
        <a class="filterItemUnselected" data-option-id="1209">1 Meter (3ft)</a>
     </li>
     <li>
        <a class="filterItemUnselected" data-option-id="1288">10 Meter (33ft)</a>
     </li>
     <li>
        <a class="filterItemUnselected" data-option-id="1291">2 Meter (7ft)</a>
     </li>
  </ul>

正确排序编号无序列表项

2 个答案: