2013-07-10 6 views
2

Есть ли простой способ обернуть Element, как в jQuery (.wrap()).Оберните элемент вокруг другого элемента

Пример:

В JQuery:

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

Что я ищу в Dart:

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() функции, которые могут удовлетворить ваши потребности:

<!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> 

После вызова wrap(), то DOM выглядит следующим образом:

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

Одна вещь (по крайней мере), чтобы следить за этим: клонирование узла не копирует прослушиватели событий, добавленные с помощью listen() (Например, elem.onClick.listen) или те, которые непосредственно привязаны к свойствам элемента. Это не проблема с простым примером, который я использую здесь, но может быть проблемой в некоторых случаях.

Основываясь на комментарии Александра, вот еще один способ обернуть элемент. Это один не клонировать элемент:

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

Я не знаю, если либо решение работает из коробки для всех ситуаций, но они работают с примерами здесь.

+2

Нужно ли клонировать 'element'? Я так не думаю. –

+0

Нет, полагаю, это не так. Я добавляю второе решение, которое не использует клон. –

+0

Я вижу другую проблему (может быть?) - что, если аргумент 'wrapper' уже имеет родителя? – MarioP

Смежные вопросы