How to sort list items based on id attribute using jquery?

Question

Hello so I have this problem, I use magento and my I can't find a place how to switch my tabs in position so I thought JQuery could come in hand. So this is what i have as an example

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

And i need to make it

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

Is there a fast way to do it? Or I have to do it one by one?

Are you trying to update the magento code that generates this page or are you looking or a function that does this after magento already rendered the page? — Shilly
– Shilly, Commented Feb 17, 2017 at 13:46
I am trying to do it after as I am using Porto template and custom tabs and I can't even find how to disable default tabs. So it would be just easier to switch after page load — Povilas Jasilionis
– Povilas Jasilionis, Commented Feb 17, 2017 at 13:56
@PovilasJasilionis if any of the answers sovled your question you should mark it as answer to inform other users what the solution was — user7255640
– user7255640, Commented Feb 22, 2017 at 11:30

Carsten Løvbo Andersen · Accepted Answer · 2017-02-17 14:12:42Z

6

I guess you have an <ul> around you <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>

edited Feb 17, 2017 at 14:12

answered Feb 17, 2017 at 13:47

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kind user Over a year ago

Would be even better if you would replace unused i variable with _.

kind user · Accepted Answer · 2017-02-17 13:52:10Z

1

Pure JS solution.

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>

answered Feb 17, 2017 at 13:52

kind user

42k8 gold badges69 silver badges78 bronze badges

Comments

Theodore K. · Accepted Answer · 2017-02-17 14:58:48Z

0

Also, for a sollution working (actually sorting) regardless of the initial order you can use sort() and append like this:

$("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>

answered Feb 17, 2017 at 14:58

Theodore K.

5,2064 gold badges32 silver badges47 bronze badges

Comments

Isuru Dinusha · Accepted Answer · 2020-05-01 07:00:24Z

0

 $(".list > li").detach().sort(function(a, b) {
				return +a.id.replace("tab-","") - b.id.replace("tab-","") ;
			 }).appendTo("ul.list");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

If your HTML code like this you can write your code using detach and a single appendTo like this.

More about detach(): https://www.w3schools.com/jquery/html_detach.asp

answered May 1, 2020 at 7:00

Isuru Dinusha

514 bronze badges

Collectives™ on Stack Overflow

How to sort list items based on id attribute using jquery?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related