jquery - 如何交换 div 之间的内容,以便将 div 1 中的内容插入到 div 2 中,反之亦然

标签 jquery html css

我有三个 div,一个是主 div,另外两个位于其下方,内容不同。我需要能够将第一个分区中的内容与第二个分区中的内容进行交换,同时它会将第一个分区中的内容放入第二个分区中。 div 1 和 3 需要发生同样的事情。下面的函数将 div 中的 HTML 两个合二为一,但我似乎无法弄清楚如何“交换”它们中的两个,以便将一个插入 div两个。

标记

<div id="main" class="content one">Foo</div>
<div id="second" class="content two">Bar</div>
<div id="third" class="content three">Bar two</div>

JQuery

$('.content.two').on('click', function(e){
    e.preventDefault();
    $('.content.one').html($('.content.two').html());
    $('.content.two').html($('.content.one').html());
});

任何帮助将不胜感激!谢谢!

最佳答案

$('.content.two').on('click', function(e){
    e.preventDefault();
    var tmp = $('.content.one').html();
    $('.content.one').html($('.content.two').html());
    $('.content.two').html(tmp);
});

关于jquery - 如何交换 div 之间的内容,以便将 div 1 中的内容插入到 div 2 中,反之亦然,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16501958/

相关文章:

css - 根据固定宽度列的数量动态拉伸(stretch)内容

c# - 切换选项卡后日期选择器不起作用

javascript - 如何为在线和离线应用程序提供相同的 HTML 页面?

javascript - 具有平滑滚动的顶部 anchor ,不会重复

javascript - 使文本转到新文本

html - 下拉动画延迟不工作的CSS

html - 删除拉脱维亚字母中的粗体

javascript - 遍历 HTMLElement 中的每个 CSS 值,合并 CSS 样式

css - 小屏幕笔记本电脑的 Bootstrap 3 网格系统问题

jquery - 如何让 jQuery $ ('#div' ).html() 在 IE7+ 中工作?