Định nghĩa và sử dụng
- .prev(): xác định thành phần cùng cấp ngay trước thành phần sử dụng .prev().
Cấu trúc
- Đã được thêm vào từ phiên bản 1.0
$('p').prev();
$('p').prev('.test');
.prev()
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(){
$('li.second').prev().css('background-color','yellow');
});
</script>
</head>
<body>
<ul>
<li>li thứ nhất</li>
<li class="second">li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy thành phần li cùng cấp ngay trước thành phần li sử dụng .prev() đã được thêm background-color.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul> |
<ul> |
Ví dụ thêm
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(){
$('li.second').prev().css('border','1px solid blue');
});
</script>
</head>
<body>
<ul>
<li>
<ul>
<li>li con thứ nhất</li>
<li>li con thứ hai</li>
</ul>
</li>
<li class="second">li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy chỉ có thành phần li cùng cấp ngay trước thành phần li có sử dụng .prev() mới được thêm border, các thành phần con thì không được.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul> |
<ul> |
.prev('Bộ chọn')
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(){
$('li').prev('.test').css('background-color','yellow');
});
</script>
</head>
<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li class="test">li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Với cách sử dụng .prev('.test') ta đã xác định cụ thể một thành phần ngay trước thành phần <li>.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul> |
<ul> |