Bao bọc nhiều phần tử trong jQuery

Bạn có thể bao bọc không phải từng phần tử riêng lẻ, mà tất cả các phần tử tìm thấy cùng nhau bằng phương thức wrapAll.

Trong mã HTML có một nhóm đoạn văn:

<p class="www">văn bản</p>
<p class="www">văn bản</p>
<p class="www">văn bản</p>
<p>văn bản</p>

Hãy tìm tất cả các đoạn văn có lớp www và bao bọc chúng trong một thẻ div:

$('.www').wrapAll('<div></div>');

Mã HTML sẽ trở thành như thế này:

<div>
<p class="www">văn bản</p>
<p class="www">văn bản</p>
<p class="www">văn bản</p>
</div>
<p>văn bản</p>

Lưu ý rằng nếu các phần tử cần bao bọc không đứng cạnh nhau, thì phương thức wrapAll trước tiên sẽ di chuyển các phần tử về một chỗ, sau đó mới bao bọc chúng. Xem ví dụ sau:

<p class="www">văn bản1</p>
<p class="www">văn bản2</p>
<p>văn bản</p>
<p class="www">văn bản3</p>

Áp dụng phương thức wrapAll:

$('.www').wrapAll('<div></div>');

Kết quả, chúng ta nhận được mã HTML sau:

<div>
	<p class="www">văn bản1</p>
	<p class="www">văn bản2</p>
	<p class="www">văn bản3</p>
</div>
<p>văn bản</p>

Các phương thức bao bọc phần tử cũng cung cấp khả năng áp dụng một hàm cho mỗi phần tử trong bộ chọn.

Hãy bao bọc tất cả các thẻ h2 trong một thẻ i.