0

到目前为止，我完成了给每个链接一个类名及其对应的 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 可以是任何东西，即使没有数字。

4

3 回答 3

4

尝试这个：-

这使用从选择器开始，所以要注意它。

演示

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

如果您仅使用 classNames 来连接 div，我有另一种方法使用data-*，如果 className 仅用于连接锚点，则可能会更简洁。使用data-target.

演示

<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);
});
于 2013-05-11T17:29:03.280 回答
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);
});
于 2013-05-11T17:20:07.390 回答
1

从给锚点一些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;
});

jsfiddle.net 上的演示

于 2013-05-11T17:48:42.013 回答