jquery 在两个 DOM 元素之间交换内容答案

【问题标题】：jquery swap content between two DOM elementsjquery 在两个 DOM 元素之间交换内容
【发布时间】：2011-06-17 20:56:29
【问题描述】：

我有两个 span 标签。一旦用户单击其中一个，我想在它们之间交换内容。如果用户再次点击，则再次交换内容，依此类推。

$(".sectionTitleText").livequery("click", function () {
        var editor = $(this).attr("data-edit-id");
        var viewer = $(this).attr("data-view-id");

        //Swap code
});

【问题讨论】：

是的，听起来像是一个计划。
//Swap code的来源是什么？？
@jnpcl 我宁愿认为这就是他寻求帮助的原因！
@Alnitak：你的意思是，让我们为他做点什么？
是的，他们是兄弟姐妹。我以为JQuery中有一个函数可以交换我不知道的内容。

标签： javascript jquery

【解决方案1】：

如果两个节点都是同一个父节点的唯一子节点，只需这样做：

$('#parent').prepend($('#parent').children().last());

这应该取当前最后一个元素，并使其成为第一个。

请参阅http://jsfiddle.net/alnitak/wt4VZ/ 进行演示。

如果不适用，请尝试：

var el1 = $('#element1');
var el2 = $('#element2');
var tag1 = $('<span/>').insertBefore(el1); // drop a marker in place
var tag2 = $('<span/>').insertBefore(el2); // drop a marker in place
tag1.replaceWith(el2);
tag2.replaceWith(el1);

这里的想法是，两个临时跨度只是充当原始元素将被放入其中的占位符，不会序列化或以其他方式弄乱这些元素。

请参阅 http://jsfiddle.net/alnitak/bzKXn/ 以获取演示。

【讨论】：

【解决方案2】：

$(".sectionTitleText").livequery("click", function () {
        var editor = $("#span1");  //put your ids here
        var viewer = $("#span2");

        editorContent = editor.clone();
    viewerContent = viewer.clone();

    editor.replaceWith(viewerContent);
    viewer.replaceWith(editorContent);
});

【讨论】：

jQuery中有swap方法吗？

【解决方案3】：

这是一个通用的 jQuery 函数：

$.fn.swapWith = function(swap_with_selector) {
    var el1 = this;
    var el2 = $(swap_with_selector);

    if ( el1.length === 0 || el2.length === 0 )
        return;

    var el2_content = el2.html();
    el2.html(el1.html());
    el1.html(el2_content);
};

有关示例，请参阅 this jsFiddle。

【讨论】：

【解决方案4】：

这是一个简单的内容交换。

var temp = $("#span1").html();
$("#span1").html($("#span2").html());
$("#span2").html(temp);

【讨论】：

当有非常好的 DOM 方法可以直接移动元素时，恕我直言，序列化和反序列化元素不是一个好主意。

【解决方案5】：

您也需要将文本保留在跨度中：

var firstText = $('#first_span_id').text()
var secondText = $('#second_span_id').text()

然后交换它：

$('#first_span_id').text(secondText)
$('#second_span_id').text(firstText)

如果您的 span 包含 html 标签，您可能需要使用 .html() 而不是 .text()

【讨论】：

当有非常好的 DOM 方法可以直接移动元素时，恕我直言，序列化和反序列化元素不是一个好主意。

【解决方案6】：

我不知道 livequery 是什么，但是这个呢：

function swapEditView(){
    var temp = $('#data-edit-id').html();
    $('#data-edit-id').html($('#data-view-id').html());
    $('#data-view-id').html(temp);
}

$('#data-edit-id').click(function(){
    swapEditView();
});

$('#data-view-id').click(function(){
    swapEditView();
});

【讨论】：

【解决方案7】：

你可以创建一个临时对象：

$element1 = $("#selector1");
$element2 = $("#selector2");

var $temp = $("<div>");
$element2.after($temp);
$element1.after($element2);
$temp.after($element1);
$temp.remove();

使用 before() 也是可能的。这是可能的，因为 after() 和 before() 在 DOM 中移动（或添加）对象，而不是复制它。

【讨论】：