Sử dụng bộ chọn jQuery :has() Selector để tìm ra những phần tử có chứa phần tử bên trong nó theo bộ chọn được chỉ định. Hãy xem cú pháp và cách thực hiện của bộ chọn jQuery này thế nào nhé
Cú pháp, Khái niệm và cách sử dụng jQuery :has() Selector
Syntax
Bộ chọn jQuery :has() Selector có cú pháp
$(":has(selector)")
| Tham số | Mô tả |
|---|---|
| selector | Tham số bắt buộc, để chỉ định phần tử để chọn. Tham số này chấp nhận bất kỳ loại bộ chọn |
:has() Selector dùng để chọn tất cả các phần tử có một hoặc nhiều phần tử bên trong chúng, phù hợp với bộ chọn được chỉ định.Hay nói dễ hiểu hơn là chọn những phần tử có chứa phần tử hậu duệ con cháu (descendant) được chỉ định.
Syntax
Lưu ý: Nếu có nhiều từ 2 tham số selector trở, chúng sẽ cách nhau bởi dấu phẩy
$(":has(selector1,selector2,...,selectorN)")
Ví dụ jQuery :has() Selector
Ví dụ
Chọn phần tử<div> mà 1 hoặc nhiều phần tử con cháu của nó có thuộc tính class='intro'
$("div:has(.intro)")
Ví dụ
Chọn phần tử<div> mà 1 hoặc nhiều phần tử con cháu của nó có thuộc tínhclass='intro' hoặc class='laixe'
$("div:has(.intro,.laixe)")
Ví dụ
Chọn phần tử<div> mà phần tử con cháu của nó không có phần tử nào là <h1>
Chúng ta sẽ sử dụng kết hợp với bộ chọn :not()
$("div:not(:has(h1))")
Bấm các nút sau để chọn
Màu xanh
Màu đỏ
Màu vàng
Màu đỏ
Màu xanh
Màu vàng
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").css("background-color", "white");
$("div:has(.xanh)").css("background-color","yellow");
$
});
$("#btn2").click(function(){
$("div").css("background-color", "white");
$("div:has(.do)").css("background-color","yellow");
});
$("#btn3").click(function(){
$("div").css("background-color", "white");
$("div:not(:has(.do))").css("background-color","yellow");
});
});
</script>
</head>
<body>
<button class="btn btn-danger" id="btn1">Div có màu xanh</button>
<button class="btn btn-danger" id="btn2">Div có màu đỏ</button>
<button class="btn btn-danger" id="btn3">Div không có màu đỏ</button>
<div style='border:1px solid'>
<p class='xanh'>Màu xanh</p>
<p class='do'>Màu đỏ</p>
</div>
<br />
<div style='border:1px solid'>
<p class='vang'>Màu vàng</p>
<p class='do'>Màu đỏ</p>
</div>
<br />
<div style='border:1px solid'>
<p class='xanh'>Màu xanh</p>
<p class='xanh'>Màu vàng</p>
</div>
</body>
</html>
Xem thêm bài viết Tất cả bộ chọn jQuery Selectors tại đây
