1

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?

4
  • 1
    And, Where is your slower method? Commented Feb 17, 2017 at 13:45
  • 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? 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 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 Commented Feb 22, 2017 at 11:30

4 Answers 4

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>

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

1 Comment

Would be even better if you would replace unused i variable with _.
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>

Comments

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>

Comments

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.