jquery - jQuerywrapとwrapAllの違い

Question

jQuery .wrapと.wrapAllの違いは何ですか？彼らはほとんど同じことをしますが、違いは何でしょうか？

Answer 1

説明の違いに注意してください。

.wrap()：一致した要素のセット内の各要素の 周りにHTML構造をラップします。：一致した要素のセット内のすべての.wrapAll()要素の周りにHTML構造をラップします。

.wrap()すべての要素を個別に.wrapAll()ラップしますが、すべてをグループとしてラップします。

例えば：

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

を使用$('.foo').wrap('<div class="bar" />');すると、これが発生します。

<div class="bar"><div class="foo"></div></div>
<div class="bar"><div class="foo"></div></div>
<div class="bar"><div class="foo"></div></div>

しかし、を使用すると$('.foo').wrapAll('<div class="bar" />');、これが発生します。

<div class="bar">
  <div class="foo"></div>
  <div class="foo"></div>
  <div class="foo"></div>
</div>

Answer 2

WrapAllはすべての要素をラップし、Wrapは各要素をラップします。

$('.inner').wrapAll('<div class="new" />');

結果として、すべての内部divが1つの新しいdivにラップされます

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

結果をラップすると...各要素

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

Answer 3

Adding jquery to execute a wrap:

$(‘p’).wrap(‘<span class=”newclass” />’);

will result in:

<span class=”newclass”&gt;
<p>This is a paragraph.</p>
</span>

<span class=”newclass”&gt;
<p>This is a paragraph.</p>
</span>

<span class=”newclass”&gt;
<p>This is a paragraph.</p>
</span>



Substitute the .wrap for .wrapAll.

$(‘p’).wrapAll(‘&lt;span class=”newclass” />’);

will result in:

<span class=”newclass”&gt;
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</span>



Now try out .wrapInner.

$(‘p’).wrapInner(‘&lt;span class=”newclass” />’);

will result in:

<p><span class=”newclass”&gt;This is a paragraph.</span></p>
<p><span class=”newclass”&gt;This is a paragraph.</span></p>
<p><span class=”newclass”&gt;This is a paragraph.</span></p>