Как отсортировать элементы списка на основе атрибута id с помощью jquery?

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>