Question

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

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

        //Swap code
});

Answer 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/。

Answer 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);
});

Answer 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。

Answer 4

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

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

Answer 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（）

Answer 6

我不知道什么是实时查询，但是这个：

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();
});

Answer 7

您可以创建临时对象：

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

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

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

jquery交换两个DOM元素之间的内容

7 个答案: