Question

我有一个名为render的类。这会不断更新，我不希望每次都更新全班。

我有一个字符串

var html1 = "<h1>Header</h1><p>this is a small paragraph</p><ul><li>list element 1.</li><li>list element 2.</li><li>list element 3.</li></ul>"

和$('.render').html(html1)产生：

<div class="render">
    <h1>Header</h1>
    <p>this is a small paragraph</p>
    <ul>
        <li>list element 1.</li>
        <li>list element 2.</li>
        <li>list element 3.</li>
    </ul>
</div>

让我们说我得到一个新的html字符串，它只是html1

的更新

var html2 = 
"<h1>Header</h1>
<p>this is a small paragraph</p>
<ul>
<li>list element 1.</li>
<li>list element 2.</li>
<li>list element 3. With a small update.</li>
</ul>"
// newlines thrown in for clarity.

我是否有一种很好的方式来插入新的html而无需重新渲染整个内容。

以下是我尝试解决此问题的项目github/rontgen.js

Answer 1

这样的东西应该可以工作（语法可能会关闭，但这应该让你知道如何做到这一点）

$('.render').children().each(function() {
   if ($(this).is('h1') && $(this).html() != html2.find('h1').html()) {
       $(this).html(html2.find('h1').html());
   }

 else if ($(this).is('p') && $(this).html() != html2.find('p').html()) {
      $(this).html(html2.find('p').html());
 }

 else if ($(this).is('ul') && $(this).html() != html2.find('ul').html()) {
     for (i=0; i<$(this).children('li').length; i++) {
        if ($(this).children('li')[i] != html2.find('ul').children('li')[i]) {
            $(this).children('li')[i].html(html2.find('ul').children('li')[i].html());
     }
   }
  }
});

Answer 2

好的，我的初步解决方案如下，就像上面的@ dave一样，但我不会穿越dom。

$(function(){

    // Cache the jQuery selectors
    var $editor = $("#editor");
    var $render = $('.render');

    $editor.focus();
    var firstTime = true;
    var cache = [''];

    var i = 0;
    var row_num = 1000;
    for(i = 0; i < row_num; i++){
        $render.append('<div id="node'+i+'"></div>')
    }

    $editor.keyup(function(){
        var fresh = $editor.val().split('\n\n');

        var i = 0;
        for(i = 0; i < fresh.length; i++){
            console.log(fresh[i]!==cache[i])
            if(fresh[i]!==cache[i]){
                $('#node'+i).html(marked(fresh[i]))
                renderMathJax('node'+i)
            }
        }
        var j;
        for(j = fresh.length; j < row_num; j++){
            $('#node'+j).empty()
        }

        cache = fresh;

    });

});


var renderMathJax = function (el) {
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,el]);
}

它的性能很好，因为它只插入并且不重新渲染，但如果我一次删除多行，仍然会有一些奇怪的现象。

Javascript - 仅渲染更新的html

2 个答案: