CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ethan E
Ethan E

Reputation: 33

Switching A tags order using JQuery

lets say i have five a 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 would like sort the elements to any position such as:

<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 to use the deatch() then after() however I can't figure out the correct way to implement them.

here what i tried

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

lmk if u can help. THANKS!

Upvotes: 1

Views: 45

Answers (6)

Asons
Asons

Reputation: 87191

May I suggest to simply use Flexbox order property instead of cut/paste 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>

Upvotes: 1

Dalin Huang
Dalin Huang

Reputation: 11342

Just use .insertAfter will move it to whatever you want.

ALSO, in case you wonder why the white space is gone, it is because

Fighting the Space Between Inline Block Elements

A series of inline-block elements formatted like you normally format HTML will have spaces in between them.

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

Example 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>

Upvotes: 0

WebsitesOntario
WebsitesOntario

Reputation: 104

Try this out! Just change the string $link_order to your desired order of elements

$link_order = "ECDBA"; //How you want your links to be ordered

for($i = 0; $i < $link_order.length; $i++){
  $element = "#" + $link_order[$i];
  $_temp = $($element); //Temporarily save the element
  $($element).remove(); //Remove the element
  $("#links").append($_temp); //Reinsert the element in the correct order
  $("#links").append(" "); //Space
}
<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>

Upvotes: 0

Fered
Fered

Reputation: 908

I would suggest a method . please take a look if you like this Your Html can be 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>

and your JS method can look like this 

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

then you can re-order them any time you call the method with desired order.

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

Hope it helps

Upvotes: 0

Sid24
Sid24

Reputation: 334

Replace your code with this, if you want to move the element with id="B" after the element with id="C",

$("#B").insertAfter("#C");

Upvotes: 0

user5676176
user5676176

Reputation:

Here is a simple 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>

Upvotes: 0

Related Questions