时间戳

首页 > 解决方案 > 使用 javascript/jquery 对 wordpress 插件生成的 UL 的顺序进行排序

javascript - 使用 javascript/jquery 对 wordpress 插件生成的 UL 的顺序进行排序

问题描述

我有一些来自插件的下拉菜单，它们不按字母顺序或升序/降序显示其内容。

检查器中的列表如下所示：

<ul class="options">
    <li class = "opt">
        <span><i></i></span>
        <label> BAC </label>
    </li>
    <li class = "opt">
        <span><i></i></span>
        <label> ACD </label>
    </li>
    <li class = "opt">
        <span><i></i></span>
        <label> FBC </label>
    </li>
</ul>

我想按标签的内容对这些 li 进行排序。

列表的顺序目前是最后输入到电子表格中的任何内容在顶部。

我尝试了一些在这里找到的解决方案，包括这个使用 javascript 对 html 列表进行排序

但是，我的下拉顺序保持不变。

这是我第一次提出问题，如果我遗漏了任何重要的问题，请告诉我。谢谢。

标签： javascriptjquerywordpresshtml-lists

解决方案

您可以对 jQuery 集合进行排序并将该集合附加到父集合

$('ul.options').append(function() {
  return $(this).children().sort(function(a, b) {
    var aText = $(a).find('label').text().trim(),
        bText = $(b).find('label').text().trim();
    return aText.localeCompare(bText);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="options">
  <li class="opt">
    <span><i></i></span>
    <label> BAC </label>
  </li>
  <li class="opt">
    <span><i></i></span>
    <label> ACD </label>
  </li>
  <li class="opt">
    <span><i></i></span>
    <label> FBC </label>
  </li>
</ul>

推荐阅读