替换 div 标签

【问题标题】：replacing div tag替换 div 标签
【发布时间】：2011-02-05 12:54:14
【问题描述】：

我有以下代码，

<div id=1 class="mydiv">  <span>some data</span></div>
<div id="q-1">data</div>
<div id=2 class="mydiv">  <span>some data</span></div>
<div id="q-2">data</div>
<div id=3 class="mydiv">  <span>some data</span></div>
<div id="q-3">data</div>
<div id=4 class="mydiv">  <span>some data</span></div>
<div id="q-4">data</div>
<div id=5 class="mydiv">  <span>some data</span></div>
<div id="q-5">data</div>

我需要将给定 ID 的 div 与它之后的一个交换，具有相同的类。

【问题讨论】：

你只是想交换 id 还是想让 div 在 DOM 中以不同的顺序排列？
请提供更一致的代码示例。因为目前根本没有代码，你的问题也不清楚。
我想交换 div id 和它的内容 div 有一个整体
我的代码太大了，所以我提供了一个示例代码。
交换了 ID 和内容后，只有 div 位置会发生变化。这就是你想要的吗？

标签： jquery

【解决方案1】：

要使用 jQuery 在另一个元素之后插入一个元素，请使用 insertAfter。请注意，它会自动从其原始上下文中删除元素：

在这里，你想要这样的东西：

$('#4').insertAfter('#5');

还要注意，ID 不能以数字开头，除非您使用的是 HTML5 文档类型。

要与下一个元素交换，请使用next：

var $el = $('#4');
$el.insertAfter($el.next());

【讨论】：

我没有 5 我只知道 4 我不知道哪个是下一个或哪个是上一个
我不知道所有的 id。我只知道一个 div 的 id，我想与下一个交换它
对不起，我忘了告诉你我在
标签中有多个
\

【解决方案2】：

由于根据 cmets 判断，您只知道 id="4" 部分，并且 ID 选择器非常快，您可以使用 .insertAfter() 将其放在 .next() 兄弟元素之后，如下所示：

$("#4").insertAfter($("#4").next());

You can try it out here。

对于更昂贵的选择器，只需将其缓存，如下所示：

var elem = $("#4");
elem.insertAfter(elem.next());

You can test that version here.

【讨论】：

对不起，我忘了在其中包含我的
包含多个
ta
@kiran - 我不知道你现在在问什么，你必须更新你的例子。
var elem = $("#4"); elem.insertAfter(elem.next());在此我还想添加条件，例如选择具有相同类名的下一个 div

【解决方案3】：

在页面任意位置交换两个元素的通用代码：

$.fn.swapWith = function (selector) {
    var placeholder = $('<div id="placeholder">').insertAfter(selector);
    $(selector).insertAfter(this);
    placeholder.after(this).remove();
};

这样使用：

$('#4').swapWith('#5');

您可以使用任何有效的 jQuery 选择器/对象来代替“#4”或“#5”。对于您想要的示例：

var el = $('#4');
el.swapWith(el.nextAll('.' + el.attr('class') + ':first'));

【讨论】：

我不知道所有的 id。我只知道一个 div 的 id，我想与下一个交换它
@Kiran，看看我的最后一个例子；）
@Box9 - .after() 不带选择器，$('#4').swapWith('#5'); 会将文本 "#5" 放在那里;)
根据尼克的评论，您可能想要this.after(selector.jquery ? selector : $(selector));
@Nick 我的错，很好发现。我刚刚将其反转为现在使用 insertAfter。

【解决方案4】：

假设您知道 id 为 5 的 div。那么您需要做的是找到下一个 div。

var myDiv = $("#5");
myDiv.next("div").insertBefore(myDiv);

你会想要让它更健壮，因为可能没有下一个 div，你需要处理这种情况，但这应该会让你走上正确的轨道。

【讨论】：

我不知道所有的 id。我只知道一个 div 的 id，我想与下一个交换它
请更新您的问题以包含该信息。我会改变我的答案来解决这个细节。
var el = jQuery("#id-2"); el.insertAfter(el.next(jQuery('.mydata')); 会选择下一个具有相同类名的 div 吗？？