用 JS 或 jQuery 区分两个容器答案

【问题标题】：Diff two containers with JS or jQuery用 JS 或 jQuery 区分两个容器
【发布时间】：2014-05-08 22:02:57
【问题描述】：

我想用新版本更新容器而不替换它。例如：

容器1：

<div id="container-one">
    <p>
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Text
    </p>
</div>

容器2：

<div id="container-two">
    <p>
        Cool intro
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

Container1 已更新：

<div id="container-one">
    <p>
        Cool intro
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       Long text
    </p>
    <p>
       New Paragraph with text in it.
    </p>
</div>

Container1.innerHTML = Container2.innerHTML 会很简单，但我不想重新加载我的 web 视图，因此代码应该检测新 div 或现有 div 中的更新内容并在 Container1 中应用修改。

更新：

Container2 是由用户编辑的 container1 的新版本，因此 Container2 可以包含任何内容：图像、链接、新段落。

我该怎么做？

【问题讨论】：

为什么不直接将文本包装到 id'd 容器（div、span 等）中并这样做？
但是您在问题中说段落是文本...我误解了什么...？看看我的回答...

标签： javascript jquery diff innerhtml

【解决方案1】：

我可能没有正确理解您的问题，但是通过在要替换的文本中添加一个 id 并使用简单的 javascript，您可以实现这一点。

HTML

<div id="container-one">
    <p>
        <span id="inner-one-1"></span>
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       <span id="inner-one-2">Text</span>
    </p>
</div>

<div id="container-two">
    <p>
        <span id="inner-two-1">Cool intro</span>
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>
       <span id="inner-two-2">Long text</span>
    </p>
</div>

<button id="click">Click Me!</button>

JS

document.getElementById("click").onclick = function() {
    document.getElementById("inner-one-2").innerHTML = document.getElementById("inner-two-2").innerHTML;
    document.getElementById("inner-one-1").innerHTML = document.getElementById("inner-two-1").innerHTML;
}

DEMO HERE

【讨论】：

我用更多细节更新了我的问题，这不是我想要的答案，但感谢您的帮助。
所以你想要的只是在第一段中添加文本但替换第二段？
Container2 是由用户编辑的 container1 的新版本，因此 Container2 可以包含任何内容：图片、链接、新段落。
和...？我的代码有什么问题，没有在做什么你想做的事？
使用 id 似乎是一种非常肮脏的方式来做到这一点，它确实有效，但使用容器的子项的解决方案会更好。

【解决方案2】：

请尝试一下。

var container_one = $("#container-one").children();
var container_two = $("#container-two").children();


$.each(container_one, function(index, element){
  var cont_one_html = $(this).html();
  var cont_two_html = $(container_two[index]).html();
  if(cont_one_html != cont_two_html){
    $(this).html(cont_two_html);
  }
});

请查看图片以获得更多了解。

【讨论】：

这太棒了！唯一的事情是，如果用户更改了段落中的某些内容，它将被更新，即使段落中的 webview 没有更改。它可以与 children().children() 一起使用变得更聪明吗？
没错，这段代码不起作用，你必须更新这段代码的某些部分。我无法理解你的想法。如果您只提供您的代码，那么我可以帮助您。

【解决方案3】：

你需要获取文本节点并替换内容，比如

$('button').on('click', function () {
    // this block is for not to update the webview
    // get the first text node
    var txt = $('#container-one > p:first').contents().first().get(0);

    if (txt.nodeType === 3) { // Node.TEXT_NODE
        txt.nodeValue = $('#container-two > p:first').text();
    }

    // update rest of the elements
    $('#container-two').children().each(function (i) {
        if (i !== 0 && $('#container-one').children()[i]) {
            $($('#container-one').children()[i]).html($(this).html());
        }
        if (!$('#container-one').children()[i]) {
            $('#container-one').append($(this).clone());
        }
    });
});

DEMO

【讨论】：

这个答案也是静态的，如果Container2有四个段落呢？
@armandG。看看我更新的代码，希望这就是你要找的

【解决方案4】：

试试看这是否适合你。

var first = $('container-one p:first');
first.html($('container-two p:first').html() + first.html());

$('container-one p:last').html($('container-two p:last').html());

【讨论】：

Container2 是由用户编辑的 container1 的新版本，因此 Container2 可以包含任何内容：图像、链接、新段落。它根本不是静态的。
html() 将采用任何内容，只要它位于 p 元素内。
一个例子：如果用户添加一个新段落，您的代码不会修改第二个段落，即使它有新内容。您的代码适用于新内容的特定配置，这就是问题所在（很抱歉我的问题一开始并不清楚）。

【解决方案5】：

使用这个：

function update(s){
   document.getElementById("container-one").innerHTML=s.innerHTML;
}

setInterval(function(){
   update(document.getElementById("container-two"));
},1000);

它的作用是每秒更新一次内容。

为了显示它可以处理动态内容，我将第二个 div 设为可编辑。

演示：http://jsfiddle.net/5RLV2/2

【讨论】：