Jquery는 HTML과 속성에서 두 요소를 재귀 적으로 비교합니다.

Question

HTML을 한 요소에서 다른 요소로 복사하는 지능적인 방법을 만들고자합니다.

내가 아래 있다고 가정 해 봅시다. ".from"에서 ".to"로 구조체를 복사하고 싶습니다. .html()로 도매를 복사 할 수 있지만 큰 트리에서는 속도가 느려지고 브라우저가 다시 그릴 때 깜박임이 발생합니다.

누구든지 재귀 적으로 각 요소의 트리를 파고 요소별로 요소를 비교할 수있는 방법이 있는지 궁금합니다. 따라서 한 요소의 HTML 또는 속성 만 변경된 경우 그 요소 하나만 변경하면됩니다. 다른 요소는 그대로 유지됩니다.

아래 예제에서 ".a"는 변경되지 않은 속성을 갖지만 HTML은 변경됩니다. ".b"는 자녀를 파고 ".x"의 속성과 HTML을 변경해야합니다. ".e"는 대상 요소에 만들어야합니다.

누구든지이 작업을 수행하는 지능적인 방법을 알고 있습니까?

<ul class="to"> 
    <li class="a">test1</li> 
    <li class="b"> 
     <div class="x">test2</div> 
    </li> 
    <li>test3</li> 
    <li class="c">test4</li> 
</ul> 

<ul class="from"> 
    <li class="a">test5</li> 
    <li class="b"> 
     <div class="y">test6</div> 
    </li> 
    <li class="c">test7</li> 
    <li class="d">test4</li> 
    <li class="e">test</li> 
</ul> 

Answer 1

내 솔루션 제발 봐 : http://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.prototype-extensions/js/extensions/element.js?view=markup - 주석 Smooth update of DOM subtree부터,이 코드는 쉽게 jQuery를에 채택 될 수있다.

간단히 말해서, 함수 updateSmoothly은 노드별로 두 개의 DOM 하위 트리 (원본 및 대상)를 노드별로 비교하여 기존 노드를 보존하고 가능하면 원본 하위 트리를 최소한으로 변경하려고합니다. 귀하의 예제에서는 텍스트 값을 변경하고 기존 텍스트/요소 노드의 CSS 클래스를 추가/제거하고 목록에 하나만 추가합니다 (LI).

이 솔루션은 프로덕션 환경에서 작동하며 IE8에서도 1300+ 행이있는 테이블을 빠르게 업데이트합니다.

P. 다른 질문에 대한 비슷한 대답 : Updating gigantic HTML table with ajax