使用JS或jQuery对两个容器进行比较差异

Question

使用JS或jQuery对两个容器进行比较差异

5

我想要更新一个容器的新版本，而不是替换它。例如：

容器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可以包含任何东西：图像、链接、新段落。

我该怎么做？

- Armand Grillet

1

为什么不把文本放进带有ID的容器（div、span或其他）中，然后以这种方式完成呢？ - benomatis

但是你在问题中说段落是文本...我有误解吗...？看一下我的答案... - benomatis

5个回答

2

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

。相关提示：文本节点是指不包含任何 HTML 标记的文本内容。

$('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

- code-jaff

这个答案也是静态的，如果Container2有四段呢？ - Armand Grillet

@armandG. 看看我的更新代码，希望这是你想要的。 - code-jaff

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

请查看下面的图片，以更好地理解： enter image description here

。

- uma

太好了！唯一的问题是，如果用户更改了段落中的某些内容，即使段落中的webview没有更改，它也会被更新。是否可以使用children().children()使其更加智能化呢？ - Armand Grillet

准确地说，这段代码无法正常工作，您必须更新代码的某些部分。我不明白你在想什么。如果你提供你的代码，我才能帮助你。 - uma

1

尝试一下，看看这是否适用于您。

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

- Streamside

Container2是由用户编辑的Container1的新版本，因此Container2可以包含任何内容：图像、链接、新段落。它并不是静态的。 - Armand Grillet

html()将接受任何内容，只要它位于p元素内部。 - Streamside

例如：如果用户添加了一个新段落，您的代码不会修改第二个段落，即使它有新内容。您的代码只能处理特定排列的新内容，这就是问题所在（很抱歉我的问题一开始没有表述清楚）。 - Armand Grillet

1

使用这个：

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

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

这段代码的作用是每秒更新一次内容。

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

Demo:http://jsfiddle.net/5RLV2/2

- Amit Joki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- benomatis · Accepted Answer

我可能没有理解你的问题，但是通过给要替换的文本添加一个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;
}

点此查看演示