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

Exploring the world of form interactions in Angular: A guide to creating dynamic element communication

The art of placing images using CSS

Storing user responses on a webpage

Is it possible to manually activate a dropdown event using pure JavaScript?

The imported font used in Firefox is displaying with a striking underline text-decoration

learning how to combine two json arrays of objects and showcase them in a react component

Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

Unable to submit form upon clicking radio button in .NET Core

Updating Django database records with ajax

Enabling JsTree Checkbox selection according to unique data-id values

Using `href="#"` may not function as expected when it is generated by a PHP AJAX function

An issue encountered while implementing a post method with fetch and Express

JavaScript array contains duplicate values

Creating a layout in jQuery Mobile with two HTML <input type="button"> elements positioned side by side and each taking up 50% of the screen

Is there a subsequent event that follows the data-rel attribute with the value of 'back'?

Is it possible for parameters to still be filled even when they start off empty

Fancybox 2 - CSS styles vanish when using Ajax request

Implementing Othello Minimax Algorithm in React.js Yields Unsuccessful Results

Tips for identifying and handling a 400 bad request error in an HTTP response within an Angular 2 application

Show a table with rows that display an array from a JSON object using JavaScript