使用 JQuery 根据所选选项对多个列表进行排序

Question

HTML代码

<Select id="alphalist">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</Select>
 
<div id="a" class="lists" style="display"> 
  <ul id="alist"> 
      <li>Axe</li> 
      <li>Arc</li> 
      <li>Apple</li>
  </ul>  
</div>

<div id="b" class="lists" style="display:none"> 
  <ul id="blist"> 
      <li>Bat</li> 
      <li>Boat</li> 
      <li>Bee</li>
  </ul>
</div>

<div id="c" class="lists" style="display:none"> 
  <ul id="clist"> 
      <li>Cat</li> 
      <li>Coat</li> 
      <li>Clock</li>  
  </ul> 
</div>

脚本代码

$(function() 
{
 $('#alphalist').change(function(){
 $('.lists').hide();
 $('#' + $(this).val()).show();
 });
});

我在这里创建了 3 个列表和一个包含选项 A、B 和 C 的下拉菜单。默认情况下选择选项 A，并且仅显示第一个列表。单击选项 B 时的方式相同，仅显示第二个列表，选择选项 C 时仅显示第三个列表。现在我需要按字母顺序对每个列表进行排序，并显示与所选选项对应的排序列表。

排序脚本代码为：

var mylist = $('#alist');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

以上代码只对第一个列表进行排序。为了对第二个列表进行排序，我们需要通过将 $('#alist) 替换为 $('#blist) 来再次编写上面的相同代码。因此，如果我们有 20 多个列表，我们如何修改上面的代码以便我们可以对所有可用列表进行排序。如果 class name 在所有列表中都是通用的，如何进行排序？请帮助我。

Answer 1

通常更容易对数组进行排序。您可以使用函数对对象进行排序，但此示例可能更容易捕获文本、对其进行排序并重建列表。

$(function() {
  function sortList(obj) {
    var arr = [];
    var list = $("ul", obj);
    $("li", list).each(function(i, el) {
      arr.push($(el).text().trim());
    });
    arr.sort();
    $(list).html("");
    $.each(arr, function(k, v) {
      $("<li>").html(v).appendTo(list);
    });
  }

  function showList(obj) {
    $(".lists").hide();
    obj.show();
  }

  $("#alphalist").change(function() {
    var t = $("#" + $(this).val());
    sortList(t);
    showList(t);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="alphalist">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</Select>

<div id="a" class="lists">
  <ul id="alist">
    <li>Axe</li>
    <li>Arc</li>
    <li>Apple</li>
  </ul>
</div>

<div id="b" class="lists" style="display:none">
  <ul id="blist">
    <li>Bat</li>
    <li>Boat</li>
    <li>Bee</li>
  </ul>
</div>

<div id="c" class="lists" style="display:none">
  <ul id="clist">
    <li>Cat</li>
    <li>Coat</li>
    <li>Clock</li>
  </ul>
</div>

Answer 2

只需遍历所有列表并对每个实例进行排序。这可以在页面加载时完成一次。

我在这里使用 html(function) 进行循环并返回每个实例的排序后的子实例

// sort lists on page load
$('.lists ul').html(function(){
  return $(this).children().sort((a,b) => $(a).text().localeCompare($(b).text()));
});

// add the change listener for select

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a" class="lists"> 
  <ul id="alist"> 
      <li>Axe</li> 
      <li>Arc</li> 
      <li>Apple</li>
  </ul>  
</div>

<div id="b" class="lists" > 
  <ul id="blist"> 
      <li>Bat</li> 
      <li>Boat</li> 
      <li>Bee</li>
  </ul>
</div>

<div id="c" class="lists" > 
  <ul id="clist"> 
      <li>Cat</li> 
      <li>Coat</li> 
      <li>Clock</li>  
  </ul> 
</div>

使用 JQuery 根据所选选项对多个列表进行排序

Sort multiple lists based on selected options using JQuery

html

sorting

jquery

html-lists

unordered