- *
- tag
- .class
- #id
- selector01, selector02, selectorN
- parent > child
- :eq()
- :gt()
- :lt()
- :even
- :odd
- :first
- :last
- :first-child
- :first-of-type
- :last-child
- :last-of-type
- :nth-child(n)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n)
- :only-child
- :only-of-type
- :animated
- [attribute]
- [attribute="value"]
- [attribute!="value"]
- [attribute|="value"]
- [attribute^="value"]
- [attribute$="value"]
- [attribute*="value"]
- [attribute~="value"]
- :lang(language)
- [bộ chọn thuộc tính 1][bộ chọn thuộc tính n]
- :parent
- :empty
- :text
- :button
- :checkbox
- :checked
- :disabled
- :enabled
- :file
- :focus
- :hidden
- :image
- :input
- :password
- :radio
- :reset
- :selected
- :submit
- :visible
- :root
- :has(selector)
- :header
- ("prev + next")
- ("prev + siblings")
- (":not(selector)")
- :contains(text)
("prev + siblings")
Đăng bởi: Admin
Định nghĩa và sử dụng
Bộ chọn ("prev + siblings"): giúp chọn tất cả các thành phần kế tiếp ngay sau thành phần trước.
- prev: thành phần trước
- siblings: thành phần cùng cấp.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.0
$('("prev ~ siblings")')
Ví dụ
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(){ $('.previous ~ p').css("border", "1px solid blue"); }); </script> </head> <body> <p>Thành phần p</div> <div> <p>Thành phần p bên trong div</div> </div> <div class="previous">Thành phần div</div> <p>Thành phần p</p> <span>Thành phần span</span> <p>Thành phần p</div> <p>Thành phần p</div> <div> <p>Thành phần p bên trong div</div> </div> </body> </html>
Hiển thị trình duyệt:
$('.previous ~ p') các thành phần p cùng cấp và sau thành phần div.previous đều đã được chọn.
Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!