jquery - 单行 jQuery innerHtml 交换器

Question

既然我们不能$('el1').swap('el2')用纯 jQuery 做一些事情（还没有？），我问各位程序员，你们是否有足够的创造力来改变它

var temp = $('el1').html();
$('el1').html($('el2').html());
$('el2').html(temp);

成单线。

（我自己尝试了许多使用toggle().

Answer 1

如果你想要一个可以交换的 jQuery，你可以像这样创建自己的调用：

$.fn.swap = function(el){
    var temp = this.html(), $el = el instanceof $ ? el : $(el);
    this.html($el.html());
    $el.html(temp);
    return this;
}

然后这样称呼它：

$(el).swap('jQuery selector');
$(el).swap(jQueryObject); //alternative

Answer 2

你不能推出自己的交换功能吗？

function swapHTML(el1, el2) {
  var temp = $(el1).html();
  $(el1).html($(el2).html());
  $(el2).html(temp);
}

这样，您可以根据需要多次调用它，作为具有不同参数的单线：

swapHTML('el1', 'el2');
swapHTML('el3', 'el4');
...

Answer 3

为了使代码更具可读性，我们假设这两个容器由 jQuery 对象A和B.

然后 ：

A.wrapInner('<div class="A"/>').append(B.wrapInner('<div class="B"/>').find(".B")).find(".A").appendTo(B).contents().unwrap().end().end().end().find(".B").contents().unwrap();

......这是一个完全可怕的单线，但这就是要求的！

演示

更好的是，这简化为：

A.wrapInner('<div class="A"/>').append(B.contents()).find(".A").appendTo(B).contents().unwrap();

......这是一个不那么可怕的单线！

演示

诀窍是在任何时候都避免.html()，这将剥夺您进一步使用 jQuery 方法链接的机会。