Question

我有以下代码，

<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交换，使用相同的类。

Answer 1

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

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

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

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

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

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

Answer 2

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

$.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'));

Answer 3

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

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

You can try it out here。

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

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

You can test that version here

Answer 4

让我们说你知道id为5的div。所以你需要做的就是找到下一个div。

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

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

替换div标签

4 个答案: