2

jQuery（.wrap() ）にあるように、 Elementをラップする簡単な方法はありますか。

例：

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>

ただし、(少なくとも) 注意すべき点が 1 つあります。ノードのクローンを作成しても、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 に答える