jQuery:在DOM中切换元素 [英] jquery: switch Elements in DOM

问题描述

使用jquery在DOM中切换两个元素的最佳方法是什么?

What the best way to switch two elements in DOM with jquery?

<div id="switchme2">some other elements in here....</div>
<div class="some other elements"></div>
<div id="switchme1">some other elements in here....</div>

应结尾为:

<div id="switchme1">some other elements in here....</div>
<div class="some other elements"></div>
<div id="switchme2">some other elements in here....</div>

推荐答案

您会发现有人告诉您使用jQuery的 before ， after 之类的东西，但请注意，可能会造成混乱如果任一元素的两边都有文本节点，则问题就解决了.

You'll get people telling you to use jQuery's before, after, and such, but beware, that can mess things up if there are text nodes on either side of either element (more on that below).

因此(对于不使用jQuery的人)，您可以直接使用DOM:

Because of that (and for people not using jQuery), you can just use the DOM directly:

function swapElements(elm1, elm2) {
    var parent1, next1,
        parent2, next2;

    parent1 = elm1.parentNode;
    next1   = elm1.nextSibling;
    parent2 = elm2.parentNode;
    next2   = elm2.nextSibling;

    parent1.insertBefore(elm2, next1);
    parent2.insertBefore(elm1, next2);
}

请注意，如果引用元素(上面的next1或next2)为null，则很好； insertBefore 可以正确处理该问题(通过在父级末尾添加，就像appendChild一样.

Note that it's fine if the reference element (next1 or next2 above) is null; insertBefore handles that correctly (by adding at the end of the parent, like appendChild would).

与jQuery结合使用:

Usage combined with jQuery:

swapElements($("#switchme1")[0], $("#switchme2")[0]);

实时示例:

jQuery(function($) {
  
    function swapElements(elm1, elm2, elm3, elm4, elm5) {
        var parent1, next1,
            parent2, next2,
            parent3, next3,
            parent4, next4,
            parent5, next5;

        parent1 = elm1.parentNode;
        next1   = elm1.nextSibling;
        parent2 = elm2.parentNode;
        next2   = elm2.nextSibling;
        parent3 = elm3.parentNode;
        next3   = elm3.nextSibling;
        parent4 = elm4.parentNode;
        next4   = elm4.nextSibling;
        parent5 = elm5.parentNode;
        next5   = elm5.nextSibling;

        parent1.insertBefore(elm2, next1);
        parent2.insertBefore(elm3, next2);
        parent3.insertBefore(elm4, next3);
        parent4.insertBefore(elm5, next4);
        parent5.insertBefore(elm1, next5);
    }

    $("#btnSwitch").click(function() {
        swapElements($("#switchme1")[0], $("#switchme2")[0], $("#switchme3")[0], $("#switchme4")[0], $("#switchme5")[0]);
    });
  
});

first text node
<div id="switchme1">this is <strong>switchme1</strong> with <strong>some other elements</strong> <em>in here<div>test</div></em></div>
second text node
<div id="switchme2">this is <strong>switchme2</strong> with <strong>some other elements</strong> <em>in here</em></div>
<div id="switchme3">this is <strong>switchme3</strong> with <strong>some other elements</strong> <em>in here</em></div>
<div id="switchme4">this is <strong>switchme4</strong> with <strong>some other elements</strong> <em>in here</em></div>
<div id="switchme5">this is <strong>switchme5</strong> with <strong>some other elements</strong> <em>in here</em></div>
third text node
<input type="button" id="btnSwitch" value="Switch Em!">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

有关jQuery before ，

More about jQuery's before, after, and such: Because jQuery tends to give you access mostly to elements (which is what you want 95% of the time!), if the elements you want to swap have text nodes around them, using those methods will mess things up. (You also have to either remember which one goes in front or figure it out.) In contrast, the swapElements method above above works regardless of whether the elements are surrounded by other elements or text nodes, and you don't have to remember or figure out which should go in front.

这篇关于jQuery:在DOM中切换元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！