14/08/2018, 09:49
Next Adjacent Selector (“prev + next”) trong jquery
Next Adjacent Selector sẽ tìm kiếm phần tử xuất hiện ngay sau các phần tử được xác đinh bởi một selector prev nào đó. Một điểm rất quan trọng cần lưu ý khi xác định selector prev và next là chúng phải có cùng một phần tử cha. Cú pháp Cú pháp ...
Next Adjacent Selector sẽ tìm kiếm phần tử xuất hiện ngay sau các phần tử được xác đinh bởi một selector prev nào đó.
Một điểm rất quan trọng cần lưu ý khi xác định selector prev và next là chúng phải có cùng một phần tử cha.
Cú pháp
Cú pháp
jQuery( "prev + next" )
Trong đó:
- prev là một selector bất kỳ.
- next là phần tử sẽ được chọn xuất hiện ngay sau prev.
Ví dụ
Tìm kiếm thẻ div xuất hiện sau thẻ p và đổi màu chữ cho chúng:
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại code24h.com</title>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<p>Đây là thẻ p </p>
<div>Đây là thẻ div 1 </div>
<br>
<p>Đây là thẻ p 2</p>
<div>Đây là thẻ div 2 </div>
<br>
<p>Đây là thẻ p 3</p>
<span>Đây là thẻ span </span>
<div>Đây là thẻ div 3 </div>
<br>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( "p + div" ).css( "color", "red");
}
</script>
</body>
</html>Ta có thể thấy rằng, thẻ div thử 3 không hề thay đổi vì giữa nó và thẻ p có sự xuất hiện của thẻ span, do vậy Next Adjacent Selector không chọn nó.
Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
