Previous Lesson Next Lesson

.wrap() trong jQuery

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

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

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

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

.wrap(Cấu trúc HTLM)

$('p').wrap(<div></div>);

.wrap(Bộ chọn)

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

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

.wrap(function(index){})

$('p').wrap(function(){});

.wrap(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').wrap('<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 mỗi thành phần p đã được bao ngoài bởi thành phần div.

wrap(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').wrap($('.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 mỗi 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 wrap được viết liên tục.

.wrap(function(index){})

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;}
p { border: 1px solid blue;}
</style>
<script>
$(function(){
    $("button").click(function(){
        $("p").wrap(function(){
            return "<div></div>"
        });
    });
});
</script>
</head>

<body>
<p>Thành phần p</p>
<button>Click để wrap thành phần p</button>
</body>
</html>

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

Mỗi lần click vào button thì thành phần

sẽ được bao ngoài thêm thành phần

Previous Lesson Next Lesson

Preview

Viết câu trả lời

.wrap() trong jQuery

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

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

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

wrap(Bộ chọn)

.wrap(function(index){})

0 Bình luận

Danh mục bài học