Question

是否有一种简单的方法来包装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>

Answer 1

这是一个可以满足您需求的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);
}

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

围绕另一个元素包裹元素

1 个答案: