.prevAll()

Định nghĩa và sử dụng

.prevAll(): xác định tất cả các thành phần cùng cấp ngay trước thành phần sử dụng .prevAll().

Cấu trúc

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

$('p').prevAll();

.prevAll('Bộ chọn')

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

.prevAll()

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.fourth').prevAll().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="fourth">li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>

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

Ta thấy tất cả các thành phần li cùng cấp ngay trước thành phần li sử dụng .prevAll() đã đượ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> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> <li>li thứ tư</li> <li>li thứ năm</li> </ul>	<ul> <li style="background-color: yellow;">li thứ nhất</li> <li style="background-color: yellow;">li thứ hai</li> <li style="background-color: yellow;">li thứ ba</li> <li class="second">li thứ tư</li> <li>li thứ năm</li> </ul>

.prevAll('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').prevAll('.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 .prevAll('.test') ta đã xác định cụ thể thành phần có class="test" 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> <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>	<ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> <li class="test" style="background-color: yellow;">li thứ tư</li> <li>li thứ năm</li> </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>
<style>
p,div {
    border: 1px solid blue;
    display: inline-block;
    height: 80px;
    width: 80px;
}
</style>
<script>
$(function(){
    $(':nth-child(5)').prevAll('p').css('border','1px solid red');
});
</script>
</head>

<body>
<p>Tag p</p>
<div>Tag div</div>
<p>Tag p</p>
<p>Tag p</p>
<div>Tag div</div>
<p>Tag p</p>
<div>Tag div</div>
</body>
</html>

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

$(':nth-child(5)'): chọn thành phần ở vị trí thứ 6 (vị trí đầu ứng với $(':nth-child(0)')).
$(':nth-child(5)').prevAll('p') sẽ xác định các thành phần p ngay trước thành phần ở vị trí thứ 6, tất cả các thành phần thỏa điều kiện này sẽ được thêm border: 1px solid red;

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<p>Tag p</p> <div>Tag div</div> <p>Tag p</p> <p>Tag p</p> <div>Tag div</div> <p>Tag p</p> <div>Tag div</div>	<p style="boder: 1px solid red;">Tag p</p> <div>Tag div</div> <p style="boder: 1px solid red;">Tag p</p> <p style="boder: 1px solid red;">Tag p</p> <div>Tag div</div> <p>Tag p</p> <div>Tag div</div>

.prev()

.prevUntil()