Question

我从插件中获得了一些下拉菜单，这些菜单未按字母顺序或升/降序显示其内容。

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

<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进行排序。

列表的顺序是当前在电子表格中输入的内容，最后在顶部。

我已经尝试过在这里找到一些解决方案，包括这个Sort an html list with javascript

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

这是我第一次问一个问题，让我知道我是否有遗漏任何重要内容。谢谢。

Answer 1

您可以对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>

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

1 个答案: