Học jQuery cơ bản bằng tiếng Việt qua bài học tìm (hoặc chọn) phần tử tiếp theo đứng ngay sau phần tử chỉ định bằng bộ chọn jQuery element + next Selector
Cú pháp, Khái niệm và cách sử dụng jQuery element + next Selector
Syntax
Bộ chọn jQuery element + next Selector có cú pháp
$("element + next")
| Tham số | Mô tả |
|---|---|
| element | Tham số bắt buộc, là bộ chọn jQuery hợp lệ |
| next | Tham số bắt buộc là phần tử tiếp theo của phần tử element phía trước |
element + next Selector dùng để chọn phần tử cùng cấp tiếp theo ngay sau đó, nghĩa phải đứng liền kềLưu ý: Bộ chọn này sử dụng dầu
+ giữa 2 phần tử nhéMẹo: Để tìm và chọn những phần tử cùng cấp tiếp theo mà không cần phải đứng ngay sau đó chúng ta sẽ sử dụng bộ chọn
element ~ siblingsVí dụ jQuery element + next Selector
Trường hợp 1:
Nếu bạn có 2 thẻ
<p> đứng ngay sau thẻ <div> và bạn sử dụng cú pháp $("div + p") thì bộ chọn jQuery chỉ tìm đến thẻ <p> đầu tiên đứng liền kề thẻ <div> và sẽ bỏ qua thẻ <p> thứ 2.Nếu bạn có 2 thẻ
<p> đứng ngay sau thẻ <div> và bạn sử dụng cú pháp $("div + p") thì bộ chọn jQuery chỉ tìm đến thẻ <p> đầu tiên đứng liền kề thẻ <div> và sẽ bỏ qua thẻ <p> thứ 2.Trường hợp 2:
Nếu bạn có
<div> đứng ngay sau thẻ <div> là thẻ <h2> rồi mới đến thẻ <p> và bạn sử dụng cú pháp $("div + p") thì bộ chọn jQuery sẽ bỏ qua thẻ <p> trong trường hợp này, vì nó không phải là phần tử đứng ngay sau thẻ <div>.Cùng xem kỹ ví dụ dưới đây để hình dung và hiểu rõ hơn nhé.
Ví dụ
Chọn những phần tử<p> là phần tử tiếp theo đứng sát và cùng cấp của phần tử <div>
$("div + p")
Xem thêm bài viết Tất cả bộ chọn jQuery Selectors tại đây
