1

我有一个叫做渲染的类。那会不断更新，我不想每次都更新整个班级。

我有一个字符串

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

4

2 回答 2

2

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

$('.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());
     }
   }
  }
});
于 2013-04-15T21:20:10.033 回答
0

好的，我的初步解决方案如下，就像上面的@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]);
}

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

于 2013-04-16T21:50:34.913 回答