2013-07-10 2 views
2

Element을 쉽게 감쌀 수 있습니까? jQuery (.wrap())가 있습니다.다른 요소 주위에 요소 둘러싸 기

예 : jQuery를에

:

$('.inner').wrap('<div />'); 

내가 다트에서 찾고 있어요 무엇 :

query('.inner').wrap(new DivElement()); 

되는 HTML 모습 수

<html> 
    <head> 
    </head> 
    <body> 
     <div class="inner"> Some text </div> 
    </body> 
</html> 

그 결과가 여기에

<html> 
    <head> 
    </head> 
    <body> 
     <div> 
      <div class="inner"> Some text </div> 
     </div> 
    </body> 
</html> 
+0

이 기능은 이미 사용 가능하다고 생각되지 않지만 유용한 기능처럼 보입니다. 다음에서 기능 요청을 만들 수 있습니다. http://dartbug.com/new – Fox32

+1

기능 요청을 만들었습니다. https://code.google.com/p/dart/issues/detail?id=11765&thanks=11765 –

답변

3

것입니다 귀하의 요구에 부합 할 수있는 wrap() 기능의 순진 구현 : wrap()를 호출 한 후

<!DOCTYPE html> 

<html> 
    <body> 
    <p class='first'></p> 

    <script type="application/dart"> 
     import 'dart:html'; 

     wrap(Element element, Element wrapper) { 
     var clone = element.clone(true); 
     element.replaceWith(wrapper); 
     wrapper.children.add(clone); 
     } 

     void main() { 
     wrap(query('p.first'), new DivElement()); 
     } 
    </script> 

    <script src="packages/browser/dart.js"></script> 
    </body> 
</html> 

를, DOM은 다음과 같습니다

<div> 
    <p class='first'></p> 
</div> 

적어도주의해야 할 것은 노드 복제는 listen()을 사용하여 추가 된 이벤트 리스너를 복사하지 않습니다. (예 : elem.onClick.listen) 또는 요소 속성에 직접 할당 된 것입니다. 이것은 여기에 사용 된 간단한 예제에서는 문제가되지 않지만 경우에 따라 문제가 될 수 있습니다.

Alexandre의 의견에 따르면, 여기에 요소를 래핑하는 또 다른 방법이 있습니다. 이것은 하나의 요소 복제하지 않습니다

wrap2(Element element, Element wrapper) { 
    element.parent.insertBefore(wrapper, element); 
    wrapper.children.add(element); 
} 

중 하나 솔루션은 모든 상황에 대한 상자 밖으로 작동하는지 모르겠어요,하지만 그들은 여기에 예제와 함께 작동합니다.

+2

'요소'를 복제해야합니까? 나는 그렇게 생각하지 않는다. –

+0

아니요, 그렇지 않다고 생각합니다. 복제를 사용하지 않는 두 번째 솔루션을 추가하고 있습니다. –

+0

또 다른 문제가 생깁니다 (어쩌면?) - wrapper가 이미 부모를 가지고 있다면? – MarioP

관련 문제