Love beautiful code? We do too.

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

.before() trong jQuery

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

.before(): Thêm thành phần vào ngay trước thành phần đã có.

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

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

.before(nội dung)
-----------------------------------------------------------------
$('div').before('<p>nội dung thêm vào</p>');
$('div').before($('h3'));

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

.before(function(index){...})
-----------------------------------------------------------------
$('div').before(function() {
    return <'p'> + this.className + <'/p'>;
});

.before(nội dung)

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>
<script>
$(function(){
    $('div').before('<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:

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng before thì ngay trước thành phần div được thêm thành phần

nội dung thêm vào

.

.before(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>
<script>
$(function(){
    $('div').before(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:

Với cách sử dụng function như trên, ta đã thêm ngay trước 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.

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