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仅用于连接的锚点，那么它可能会更清晰。使用data-target。

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);
});

Answer 2

假设所有div都位于div.container（例如）

中

//iterate through all links
$('a').each(functioh() {
  //get div block which id is link's className
  var $divBlock = $('div.' + $(this).attr('class'));
  //add div to the container
  $('div.container').append($divBlock);
});

Answer 3

首先给锚点赋予一些href属性，而不是类。它应该看起来像

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

现在你可以轻松地迭代它们，找到相应的div并重新排序它们：

var previous;
$("a.contentlink").each(function() {
    var selector = $(this).attr("href");
    var div = $(selector);
    previous = previous ? div.insertAfter(previous) : div;
});

Demo at jsfiddle.net

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

3 个答案:

Demo

Demo