Rearranging anchor tag order with the power of JQuery

Question

Rearranging anchor tag order with the power of JQuery

Imagine I have five anchor tags

<a id = "A" class = "Home">Home</a>
<a id = "B" class = "Maps">Maps</a>
<a id = "C" class = "Plans">Plans</a>
<a id = "D" class = "Community">Community</a>
<a id = "E" class = "Comments">Comments</a>

I want to rearrange the elements in any order like this:

<a id = "E" class = "Comments">Comments</a>
<a id = "D" class = "Community">Community</a>
<a id = "C" class = "Plans">Plans</a>
<a id = "A" class = "Home">Home</a>
<a id = "B" class = "Maps">Maps</a>

Using jQuery, I thought of using detach() and then after(), but I'm having trouble implementing them correctly.

Here's what I attempted:

var b = document.getElementById("B");
var c = document.getElementById("C");
$("a").detach("#B");
$("c").after(b);

Let me know if you can help. Thank you!

javascript jquery html css

Answer 1

Answer №1

Why not consider utilizing the Flexbox order property instead of manually rearranging elements?

$("#A").css("order", "4");
$("#B").css("order", "5");
$("#C").css("order", "3");
$("#D").css("order", "2");
$("#E").css("order", "1");

div {
  display: flex;
}
div a {
  padding: 10px;
}

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

<div>
  <a id = "A" class = "Home">Home</a>
  <a id = "B" class = "Maps">Maps</a>
  <a id = "C" class = "Plans">Plans</a>
  <a id = "D" class = "Community">Community</a>
  <a id = "E" class = "Comments">Comments</a>
</div>

Answer 2

Why not consider utilizing the Flexbox order property instead of manually rearranging elements?

$("#A").css("order", "4");
$("#B").css("order", "5");
$("#C").css("order", "3");
$("#D").css("order", "2");
$("#E").css("order", "1");

div {
  display: flex;
}
div a {
  padding: 10px;
}

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

<div>
  <a id = "A" class = "Home">Home</a>
  <a id = "B" class = "Maps">Maps</a>
  <a id = "C" class = "Plans">Plans</a>
  <a id = "D" class = "Community">Community</a>
  <a id = "E" class = "Comments">Comments</a>
</div>

Answer 3

Answer №2

Illustrating a straightforward example:

$('.moveA').click(function() {
  $('#A').insertAfter($('#E'));
});

a {
display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id = "A" class = "Home button is-success">Home</a>
<a id = "B" class = "Maps button is-success">Maps</a>
<a id = "C" class = "Plans button is-success">Plans</a>
<a id = "D" class = "Community button is-success">Community</a>
<a id = "E" class = "Comments button is-success">Comments</a>
<a class="moveA button is-success">move link A to bottom</a>

Answer 4

Illustrating a straightforward example:

$('.moveA').click(function() {
  $('#A').insertAfter($('#E'));
});

a {
display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id = "A" class = "Home button is-success">Home</a>
<a id = "B" class = "Maps button is-success">Maps</a>
<a id = "C" class = "Plans button is-success">Plans</a>
<a id = "D" class = "Community button is-success">Community</a>
<a id = "E" class = "Comments button is-success">Comments</a>
<a class="moveA button is-success">move link A to bottom</a>

Answer 5

Answer №3

To switch the position of two elements identified as "D" and "E", use the following code:

$("#D").insertAfter("#E");

Answer 6

To switch the position of two elements identified as "D" and "E", use the following code:

$("#D").insertAfter("#E");

Answer 7

Answer №4

Here is a suggestion for a method you might find helpful: Your HTML code can be structured like this:

<div id="container">
    <a id="A" class="Home">Home</a>
    <a id="B" class="Maps">Maps</a>
    <a id="C" class="Plans">Plans</a>
    <a id="D" class="Community">Community</a>
    <a id="E" class="Comments">Comments</a>
</div>

Your JavaScript method can be implemented as follows:

 var container = $('#container');
 function changeOrder(positions){
    positions = positions.split(',');
    for(var i = 0; i < positions.length; i++){
        container.append($('#'+positions[i]));
        container.append(' ');
    }
 }

By calling the method with the desired order, you can easily re-order the elements anytime:

changeOrder("C,D,E,B,A");

I hope you find this solution helpful.

Answer 8

Here is a suggestion for a method you might find helpful: Your HTML code can be structured like this:

<div id="container">
    <a id="A" class="Home">Home</a>
    <a id="B" class="Maps">Maps</a>
    <a id="C" class="Plans">Plans</a>
    <a id="D" class="Community">Community</a>
    <a id="E" class="Comments">Comments</a>
</div>

Your JavaScript method can be implemented as follows:

 var container = $('#container');
 function changeOrder(positions){
    positions = positions.split(',');
    for(var i = 0; i < positions.length; i++){
        container.append($('#'+positions[i]));
        container.append(' ');
    }
 }

By calling the method with the desired order, you can easily re-order the elements anytime:

changeOrder("C,D,E,B,A");

I hope you find this solution helpful.

Answer 9

Answer №5

Give this a try! Simply update the variable $link_order with your preferred element order

$link_order = "BCEDA"; //Define the desired order of links

for($i = 0; $i < $link_order.length; $i++){
  $element = "#" + $link_order[$i];
  $_temp = $($element); //Store the element temporarily
  $($element).remove(); //Remove the element from its current position
  $("#links").append($_temp); //Add back the element in the correct order
  $("#links").append(" "); //Add some space between elements
}

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

<div id="links">
  <a id = "A" class = "Home">Home</a>
  <a id = "B" class = "Maps">Maps</a>
  <a id = "C" class = "Plans">Plans</a>
  <a id = "D" class = "Community">Community</a>
  <a id = "E" class = "Comments">Comments</a>
</div>

Answer 10

Give this a try! Simply update the variable $link_order with your preferred element order

$link_order = "BCEDA"; //Define the desired order of links

for($i = 0; $i < $link_order.length; $i++){
  $element = "#" + $link_order[$i];
  $_temp = $($element); //Store the element temporarily
  $($element).remove(); //Remove the element from its current position
  $("#links").append($_temp); //Add back the element in the correct order
  $("#links").append(" "); //Add some space between elements
}

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

<div id="links">
  <a id = "A" class = "Home">Home</a>
  <a id = "B" class = "Maps">Maps</a>
  <a id = "C" class = "Plans">Plans</a>
  <a id = "D" class = "Community">Community</a>
  <a id = "E" class = "Comments">Comments</a>
</div>

Answer 11

Answer №6

Simply utilizing the .insertAfter function will relocate it to your desired location.

Moreover, if you are curious about why the spacing has disappeared, it is due to:

Tackling the Spacing Issue Between Inline Block Elements

A arrangement of inline-block elements styled in a typical HTML format will exhibit spaces between them.

Reference: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Illustrated below:

body {
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px 20px;
}

ul {
  list-style: none
}

li {
  background: slategrey;
  display: inline-block;
  /* inline block hack for IE 6&7 */
  zoom: 1;
  *display: inline;
  padding: 4px;
  color: white
}

ul.white-space-fix li {
  margin-right: -4px;
}

ul.zero-size {
  font-size: 0px;
}
ul.zero-size li {
  font-size: 16px;
}

ul.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

<h1>Inline-block / white-space bug</h1>
original...
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

fixed by funky code formatting...
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

fixed by adding html comments...
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

$('#C').insertAfter($('#E'));

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

<a id="A" class="Home">Home</a><a id="B" class="Maps">Maps</a><a id="C" class="Plans">Plans</a><a id="D" class="Community">Community</a><a id="E" class="Comments">Comments</a>

Answer 12

Simply utilizing the .insertAfter function will relocate it to your desired location.

Moreover, if you are curious about why the spacing has disappeared, it is due to:

Tackling the Spacing Issue Between Inline Block Elements

A arrangement of inline-block elements styled in a typical HTML format will exhibit spaces between them.

Reference: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Illustrated below:

body {
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px 20px;
}

ul {
  list-style: none
}

li {
  background: slategrey;
  display: inline-block;
  /* inline block hack for IE 6&7 */
  zoom: 1;
  *display: inline;
  padding: 4px;
  color: white
}

ul.white-space-fix li {
  margin-right: -4px;
}

ul.zero-size {
  font-size: 0px;
}
ul.zero-size li {
  font-size: 16px;
}

ul.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

<h1>Inline-block / white-space bug</h1>
original...
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

fixed by funky code formatting...
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

fixed by adding html comments...
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

$('#C').insertAfter($('#E'));

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

<a id="A" class="Home">Home</a><a id="B" class="Maps">Maps</a><a id="C" class="Plans">Plans</a><a id="D" class="Community">Community</a><a id="E" class="Comments">Comments</a>

Rearranging anchor tag order with the power of JQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Tips for applying a linear gradient mask to div elements?

In JavaScript, how can we determine the structure of an object similar to the str function in R language?

Modifying an image's height and width attributes with jQuery and CSS on click action

Troubleshooting JavaScript If-Else Statements

Encountering a DiscordAPIError[10062] when attempting to retrieve user points from the database due to an unknown interaction

Unlocking the secrets of integrating extra information into tooltips with chart.js

What is the best way to vertically center elements within a navigation bar?

Tally the number of sub-labels associated with each main label

Webpack returns an undefined error when attempting to add a JavaScript library

What is the best way to position an element in the center of the screen

Dealing with Failed Axios Requests in React

Ways to automatically preload all tabs using jQuery

The ion-input border seems to be fluctuating as the keyboard appears on the screen

Exploring the realm of external variables and scoping within a jQuery function

Experience the quick sort programming algorithm in action using Vue.js without the hassle of dealing with Promises

What is the process of closing a dropdown in Vue 3 JS when clicking on any part of the page?

nextJS does not recognize the term 'Window'

A more efficient approach to creating a personalized design

Learn how to create a fading effect for an element when the mouse is inactive, and have it fade back in when the mouse is active again using J

The token endpoint in Nuxtjs auth module's configuration for auth strategies is not being triggered