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

1 回答 1

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例如) 添加的事件侦听器或直接分配给元素属性的事件侦听器。这不是我在这里使用的简单示例的问题，但在某些情况下可能是一个问题。

根据 Alexandre 的评论，这是另一种包装元素的方法。这个不克隆元素：

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

我不知道这两种解决方案是否适用于所有情况，但它们适用于此处的示例。

于 2013-07-10T13:28:31.993 回答