Phương thức wrap

Phương thức wrap bao bọc các phần tử trong một thẻ được chỉ định.

Cú pháp

Tham số của phương thức có thể là văn bản (có thể chứa thẻ), phần tử DOM hoặc đối tượng jQuery:

javascript.wrap(text or tag);

Như vậy các phần tử được chọn sẽ được bao bọc bởi nội dung, mà sẽ được trả về bởi một hàm do người dùng định nghĩa. Hàm được gọi riêng biệt, cho từng phần tử trong tập hợp được chọn, nhận vị trí của phần tử trong tập hợp làm tham số:

javascript.wrap(function(vị trí trong tập hợp));

Ví dụ

Hãy bao bọc tất cả các đoạn văn có lớp www bằng thẻ div:

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
javascript$('.www').wrap(document.createElement('div'));

Mã HTML sẽ trở thành như sau:

html<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<p>text</p>

Ví dụ

Tham số có thể truyền không chỉ là tên thẻ, mà còn có thể là cấu trúc sau:

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
javascript$('.www').wrap('<div></div>');

Mã HTML sẽ trở thành như sau:

html<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<p>text</p>

Ví dụ

Vào thẻ mở có thể viết bất kỳ thuộc tính nào, khi đó việc bao bọc sẽ được thực hiện cùng với các thuộc tính đó. Hãy bao bọc các đoạn văn có lớp www bằng một div với lớp zzz:

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
javascript$('.www').wrap('<div class="zzz"></div>');

Mã HTML sẽ trở thành như sau:

html<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<p>text</p>

Xem thêm

  • các phương thức wrapAll, wrapInner, unwrap,
    cho phép làm việc với việc bao bọc các phần tử