Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .wrapAll() trong jQuery
Previous Lesson Next Lesson

.wrapAll() trong jQuery

Định nghĩa và sử dụng .wrapAll() trong jQuery

.wrapAll(): Bao ngoài các thành phần được chọn bởi một cấu trúc HTML.

Cấu trúc .wrapAll() trong jQuery

Đã được thêm vào từ phiên bản 1.0

.wrapAll(Cấu trúc HTLM)

$('p').wrapAll(<div></div>);
.wrapAll(Bộ chọn)

$('p').wrapAll($('.test'));

.wrapAll(Thành phần bao ngoài)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div { border: 1px solid red;}
</style>
<script>
$(function(){
    $('p').wrapAll('<div></div>');
});
</script>
</head>

<body>
<p>Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy các thành phần p đã được bao ngoài bởi thành phần div.

.wrapAll(Bộ chọn)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div { margin: 2px; padding: 2px; }
div.test { border: 1px solid red; }
div.test div { border: 1px solid blue; }
</style>
<script>
$(function(){
    $('p').wrapAll($('.test'));
});
</script>
</head>

<body>
<p>Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
<div class="test"><div></div></div>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy các thành phần p đã được bao ngoài bởi thành phần <div class="test"><div>Thành phần p</div></div>, chú ý là cách dùng này chỉ hiệu quả khi đoạn wrapAll được viết liên tục.

Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With