使用JQuery切换标签顺序

Question

假设我有五个a标签

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

我希望将元素排序到任何位置，例如：

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

使用Jquery时，我想先使用deatch()，然后再使用()，但是我想不出实现它们的正确方式。

下面是我尝试过的

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

lmk，如果你能帮忙的话。谢谢!

Answer 1

我是否可以建议简单地使用Flexbox order属性而不是剪切/粘贴元素

​

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

只需使用.insertAfter即可将其移动到您想要的任何位置。

此外，如果您想知道为什么空白消失了，这是因为

处理内嵌块元素之间的空格

一系列像HTML格式一样格式化的内联块元素之间会有空格。

参考：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

示例如下：

​

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 3

下面是一个简单的例子：

​

$('.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>

​