如何使用jquery根据id属性对列表项进行排序？

Question

你好，所以我有这个问题，我使用magento和我的我找不到一个地方如何切换我的标签在适当的位置，所以我认为JQuery可以在手中。这是我举的一个例子

<li id="tab-4">
<li id="tab-3">
<li id="tab-2">
<li id="tab-1">

我要做的就是

<li id="tab-1">
<li id="tab-2">
<li id="tab-3">
<li id="tab-4">

有没有一种快速的方法呢？还是我得一个接一个地做？

Answer 1

我猜你身边有一个<ul> <li>

​

ul = $('ul'); // your parent ul element
ul.children().each(function(_,li){ul.prepend(li)})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="tab-4">4</li>
<li id="tab-3">3</li>
<li id="tab-2">2</li>
<li id="tab-1">1</li>
</ul>

​

Answer 2

纯JS解决方案。

​

var a = document.getElementsByTagName('li');
var b = document.getElementById('list');
var arr = [];

Array.from(a).forEach(v => arr.push(v));
arr.reverse().forEach(v => b.append(v));

<ul id='list'>
  <li id="tab-4">4</li>
  <li id="tab-3">3</li>
  <li id="tab-2">2</li>
  <li id="tab-1">1</li>
</ul>

​

Answer 3

此外，对于解决方案的工作(实际排序)，无论初始顺序如何，您可以使用sort()和append，如下所示：

​

$("ul li").sort(function(a,b){
    if(a.id.substring(4, 5) < b.id.substring(4, 5)) {
        return -1;
    } else {
        return 1;
    }
}).each(function() { $('ul').append(this);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="tab-4">4</li>
  <li id="tab-1">1</li>
  <li id="tab-3">3</li>
  <li id="tab-2">2</li>
</ul>

​