.after()
Định nghĩa và sử dụng .after() Chèn nội dung hoặc di chuyển thành phần vào ngay sau thành phần đã có. Thường được dùng trong slide, chuyển động lặp lại của hình. .after(nội dung) Cấu trúc $(‘div’).after(‘<p>nội dung thêm vào</p>’); $(‘div’).after($(‘h3’)); Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>Tiêu đề</title> <script src=”https://code.jquery.com/jquery-latest.js”></script> <script> $(function(){ $(‘div’).after(‘<p>nội […]
Định nghĩa và sử dụng
.after()Chèn nội dung hoặc di chuyển thành phần vào ngay sau thành phần đã có.- Thường được dùng trong slide, chuyển động lặp lại của hình.
.after(nội dung)
Cấu trúc
$('div').after('<p>nội dung thêm vào</p>');
$('div').after($('h3'));
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('div').after('<p>nội dung thêm vào</p>');
});
</script>
</head>
<body>
<div>Thành phần div</div>
</body>
</html>
Hiển thị trình duyệt:
Thành phần divnội dung thêm vào
Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng after thì ngay sau thành phần div đã được thêm thành phần <p>nội dung thêm vào</p>.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
| <div>Thành phần div</div> | <div>Thành phần div</div> <p>nội dung thêm vào</p> |
.after(function(index){…})
Cấu trúc
$('div').after(function() {
return <'p'> + this.className + <'/p'>;
});
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('div').after(function() {
return '<p>' + this.className + '</p>';
});
});
</script>
</head>
<body>
<div class="test01">thành phần div 01</div>
<div class="test02">thành phần div 02</div>
</body>
</html>
Hiển thị trình duyệt:
thành phần div 01test01
thành phần div 02test02
Với cách sử dụng function như trên, ta đã thêm sau mỗi thành phần div lần lượt là thành phần p với nội dung được lấy từ tên class của thành phần div.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
| <div class=”test01″>thành phần div 01</div> <div class=”test02″>thành phần div 02</div> |
<div class=”test01″>thành phần div 01</div> <p>test01</p> <div class=”test02″>thành phần div 02</div> <p>test02</p> |
