wrap

.wrap(selector)

マッチした要素を、渡されたパラメータでラップします。 パラメータはu()で処理され .wrap('<div>')のようなHTMLタグを受け取ります。

.wrap(selector);

パラメータ

selector: string

.wrap('<div>')のような、 ラッピングしたい要素のセレクタを指定します。
.wrap('<div class="a1"><div class="b1"><div class="c1"></div></div></div>') のように、ネストしたセレクタも jQueryの.wrap と同様に指定することができます。 ラップされる要素は、ネストされた要素の最初の要素の一番内側の要素としてラップされます。

戻り値

u

ラップされた要素を含むUmbrellaのインスタンスを返します。

例

HTML要素をラップします。

元の要素

<button class="example">Link1</button>

u(".example").wrap('<a class="wrapper">');

結果は以下のようになります。

<a class="wrapper">
  <button class="example">Link1</button>
</a>

Umbrellaのメソッドチェーンで要素をラップします。

u(".example").wrap('<a>').attr({class: "wrapper", href: "http://google.com"});

結果は以下のようになります。

<a href="http://google.com" class="wrapper">
  <button class="example">Link1</button>
</a>

複数の要素をラップします。

<button class="example">Link1</button>
<button class="example">Link2</button>
<button class="example">Link3</button>

u(".example").wrap('<a>').attr({class: "wrapper", href: "http://google.com"});

結果は以下のようになります。

<a href="http://google.com" class="wrapper">
  <button class="example">Link1</button>
</a>
<a href="http://google.com" class="wrapper">
  <button class="example">Link2</button>
</a>
<a href="http://google.com" class="wrapper">
  <button class="example">Link3</button>
</a>

セレクタをネストしたパラメータの場合。

<button class="example">Link1</button>

u(".example").wrap('<div class="a1"><div class="b1"><div class="c1"></div></div></div>');

結果は以下のようになります。

<div class="a1">
  <div class="b1">
    <div class="c1">
      <a href="http://google.com" class="wrapper">
        <button class="example">Link1</button>
      </a>
    </div>
  </div>
</div>

セレクタをネストし、複数の子要素を持つパラメータの場合。

<button class="example">Link1</button>

u(".example").wrap('<div class="a1"><div class="b1"><div class="c1"></div></div><div class="b2"><div class="c2"><div class="d1"></div></div></div></div>');

結果は以下のようになります。

<div class="a1">
  <div class="b1">
    <div class="c1">
      <a href="http://google.com" class="wrapper">
        <button class="example">Link1</button>
      </a>
    </div>
  </div>
  <div class="b2">
    <div class="c2">
      <div class="d1"></div>
    </div>
  </div>
</div>

デモ

"デモ用文字列"をクリックすると、 "デモ用文字列"をHTML要素でラップします。

JavaScript

u('#demo').on('click', function(e){
  var html = '<div class="a1">' +
               '<div class="b1">' +
                 '<div class="c1"></div>' +
               '</div>' +
               '<div class="b2">' +
                 '<div class="c2">' +
                   '<div class="d1"></div>' +
                 '</div>' +
               '</div>' +
             '</div>';
  u(this).wrap(html);
});

CSS

.a1 {
  color: #d50000;
}
.b1 {
  font-size: 60%;
}
.c1 {
  font-style: italic;
}

HTML

<span id="demo">デモ用文字列</span>