14/08/2018, 09:48
Next Siblings Selector (“prev ~ siblings”) trong jquery
Next Siblings Selector sẽ tìm kiếm phần tử cùng cấp xuất hiện sau các phần tử được xác định bởi một selector prev nào đó và thỏa mãn selector được cung cấp. Sự khác nhau giữa (prev + next) và (prev ~ siblings) là trong khi (prev + next) sẽ chỉ tìm kiếm phần tử xuất hiên ngay sau phần tử ...
Next Siblings Selector sẽ tìm kiếm phần tử cùng cấp xuất hiện sau các phần tử được xác định bởi một selector prev nào đó và thỏa mãn selector được cung cấp.
Sự khác nhau giữa (prev + next) và (prev ~ siblings) là trong khi (prev + next) sẽ chỉ tìm kiếm phần tử xuất hiên ngay sau phần tử prev thì (prev ~ siblings) sẽ tìm kiếm tất cả các phần tử theo sau( tất nhiên là chúng phải thỏa mãn siblings selector nữa ).
Cú pháp
Cú pháp
jQuery( "prev ~ siblings" )
Trong đó:
- prev là một selector bất kỳ.
- siblings là selector sẽ lọc lại các phần tử xuất hiện sau prev.
Ví dụ
Tìm kiếm thẻ các thẻ theo sau thẻ p và có class="true" 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 class="true">Đây là thẻ div class="true" </div>
<div class="true">Đây là thẻ div class="true" </div>
<span class="true">Đây là thẻ span class="true" </span>
<div>Đây là thẻ div co class = not </div>
<br>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( "p ~.true" ).css( "color", "red");
}
</script>
</body>
</html>Ta có thể thấy rằng, thẻ div thứ 3 không hề thay đổi vì nó có class="not" chứ không phải "true".
Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
