javascript - 如何根据 Javascript/Jquery 中相应元素的顺序对元素重新排序？

Question

到目前为止，我已经为每个链接提供了一个类名，并为其相应的 div 提供了一个与该类具有相同值的 id。

所以它看起来像这样:

<a class="content1">Content1</a>
<a class="content2">Content2</a>
<a class="content3">Content3</a>

和 div，虽然不按顺序，但至少带有响应的 id:

<div id="content2">Content1</div>   
<div id="content1">Content1</div>
<div id="content3">Content1</div>

问题是如何对 div 重新排序，以便它们的排序方式与链接相同？

我不能使用子字符串或类似的东西，因为 ID 可以是任何东西，即使没有数字。

Answer 1

试试这个:-

这使用了选择器开头，所以要注意它。

Demo

$('a[class^=content]').each(function(){
   var div = $('#'+this.className);
    div.parent().append(div);
});

如果您仅使用 classNames 来连接 div，我有另一种使用 data-* 的方法，如果 className 仅在 anchor 中用于连接，这可能会更干净。使用数据目标。

Demo

<a  data-target="#content1">Content1</a>
<a  data-target="#content2">Content2</a>
<a  data-target="#content3">Content3</a>
<div id="content2">Content2</div>   
<div id="content1">Content1</div>
<div id="content3">Content3</div>

#

$('a[data-target^=#content]').each(function(){
   var div = $($(this).data('target'));
    div.parent().append(div);
});