Question

我试图获取列表的内容（不按字母顺序排列），然后将每个项目添加到数组中，将它们按字母顺序排序，然后按字母顺序将它们重新插入列表中。

简单语言：我需要使用JS或jQuery按字母顺序排列列表。

这就是我所拥有的。我只是无法弄清楚如何将数组的内容插入到列表中。

提前谢谢大家：）

＆＃13;

var sectors = [];
$("li").each(function() { sectors.push($(this).text()) });
sectors.sort();
console.log(sectors);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<ul>
  <li id="alphabet">B</li>
  <li id="alphabet">C</li>
  <li id="alphabet">A</li>
</ul>

＆＃13;

https://jsfiddle.net/stu16396/

Answer 1

这里不需要生成数组，您可以直接在jQuery对象上使用sort()方法，因为选择了li元素。排序后，您可以按更正的顺序将它们追加回父ul。试试这个：

$("li").sort(function(a, b) {
    var aText = $(a).text(), bText = $(b).text();
    return aText < bText ? -1 : aText > bText ? 1 : 0;
}).appendTo('ul');

Updated fiddle

另请注意，文档中具有重复的id属性无效。您的#alphabet元素应更改为使用class代替。

Answer 2

不需要jQuery，您可以使用Vanilla JavaScript。 ;）

取父元素（推荐ID作为标识符）
将节点列表转换为数组，因为排序很容易
按自定义条件对数组进行排序“element.innerText”是可见部分

按正确的顺序逐项移动

// selector to parent element (best approach by id)
var parent = document.querySelector("ul"),
    // take items (parent.children) into array
    itemsArray = Array.prototype.slice.call(parent.children);

// sort items in array by custom criteria
itemsArray.sort(function (a, b) {
    // inner text suits best (even when formated somehow)
    if (a.innerText < b.innerText) return -1;
    if (a.innerText > b.innerText) return 1;
    return 0;
});

// reorder items in the DOM
itemsArray.forEach(function (item) {
    // one by one move to the end in correct order
    parent.appendChild(item);
});

比jQuery快一百倍，查看性能对比图表http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/

Answer 3

您可以这样做：

$("li").each(function(i) { $(this).text(sectors[i]) });

对sectors数组进行排序后。请注意，您的ID必须是唯一的。

Answer 4

在id元素处将className调整为.alphabet，以防止在id中重复document。

您可以将String.prototype.split()与""用作参数，Array.prototype.sort()，.text()

var li = $(".alphabet"), text = li.text().split("").sort();

li.text(function(index) {
  return text[index]
})

<script src="//code.jquery.com/jquery-git.js"></script>
<ul>
  <li class="alphabet">B</li>
  <li class="alphabet">C</li>
  <li class="alphabet">A</li>
</ul>

Answer 5

我已更新了您的jsfiddle here，基本上您已移除<li>，然后使用新订单添加它们。

var sectors = [];
$("li").each(function() { sectors.push($(this).text()) });
sectors.sort();
$("ul li").remove(); // Clears list

for( word of sectors) {
    $("ul").append("<li>" + word + "</li>");
}

使用JS或jQuery按字母顺序排列列表

5 个答案:

不需要jQuery，您可以使用Vanilla JavaScript。 ;）