Người Viết : ViKiMi Editor

Tìm kiếm phần tử con ( Huệ Duệ ) của phần tử được chọn, cho đến P Tử Con cuối cùng
Thư viện jQuery cung cấp khả năng duyệt phần tử con rất tốt. Không chỉ cho phép tìm phần tử con TRỰC TIẾP, Thư viện jQuery còn cung cấp khả năng tìm tất cả Huệ duệ của phần tử được chọn. Khả năng này cho phép tìm tất cả các phần tử con, cho đến tận phần tử cuối cùng. Có thể nói chính khả năng lọc, tìm kiếm các phần tử mạnh mẽ mà Thư viện jQuery khá ổn.
Thư viện jQuery được sử dụng nhiều và ưu tiên vì sự hữu ích và dễ dàng thuận tiện. Nó góp phần giúp Lập trình Viên quản lý công việc của họ tốt hơn. Hầu hết cú pháp mang lại đều ngắn gọn.
+ Thư viện jQuery cung cấp khả năng Duyệt phần tử con ( HUỆ DUỆ ) mạnh mẽ.
PHƯƠNG THỨC DUYỆT TẤT CẢ PHẦN TỬ CON :
+ Find() Method
Phương thức find() trả về tất phần tử con ( HUỆ DUỆ ) của phần tử được chọn, cho đến phần tử CON cuối cùng.
CÚ PHÁP ::
+ $( SELECTOR ). find( Param1, Param2, … , ParamN );
[ Param ] : Là tham số bắt buộc
EXAMPLE 1 ::
Duyệt tất cả các phần tử CON của Phần Tử được chọn, cho đến phần tử CON cuối cùng.
<!DOCTYPE html>
<html>
<head>
<style>
/* Tạo Kiểu CSS cho tất cả các phần tử
* bên trong phần tử có class : HUEDUE
*/
.HUEDUE * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
/* Duyệt tất cả PT Con của div.HUEDUE, cho đến
* PT Con cuối cùng
* Tạo Kiểu CSS cho tất cả các phần tử CON
*/
$(document).ready(function(){
$("div.HUEDUE").find("*").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="HUEDUE" style="padding: 10px; width:500px; border: 2px solid blue">DIV (current element)
<p>p (child)
<span class="first">span (grandchild) </span>
<span class="second">span (grandchild) </span>
<span class="third">span (grandchild) </span>
</p>
<p>p (child)
<span class="first">span (grandchild) </span>
<span class="second">span (grandchild) </span>
<span class="third">span (grandchild) </span>
</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả ::

EXAMPLE 2 ::
Duyệt tất cả các phần tử CON của Phần Tử được chọn, cho đến phần tử CON cuối cùng. Dựa trên các tham số truyền vào bộ lọc tìm kiếm.
<!DOCTYPE html>
<html>
<head>
<style>
/* Tạo Kiểu CSS cho tất cả các phần tử
* bên trong phần tử có class : HUEDUE
*/
.HUEDUE * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
/* Duyệt tất cả PT Con của div.HUEDUE, cho đến
* PT Con cuối cùng, dựa trên tham số truyền vào bộ lọc
* Tạo Kiểu CSS cho tất cả các phần tử CON
*/
$(document).ready(function(){
$("div.HUEDUE").find("span.first, span.third").css({"color": "red", "border": "2px solid red"});
$( "div" ).find(" span.second ").css({"color": "red", "border": "2px solid blue"});
});
</script>
</head>
<body>
<div class= "HUEDUE" style="padding: 10px; width:500px; border: 2px solid blue">DIV (current element)
<p>p (child)
<span class="first">span (grandchild) </span>
<span class="second">span (grandchild) </span>
<span class="third">span (grandchild) </span>
</p>
<p>p (child)
<span class="first">span (grandchild) </span>
<span class="second">span (grandchild) </span>
<span class="third">span (grandchild) </span>
</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả ::

Như vậy, thật đơn giản để có thể tìm kiếm tất cả các phần tử con (HUỆ DUỆ / Descendants) của một phần tử được chọn. Sự bổ sung này rất hữu ích cho tìm kiếm phần tử cha (TỔ TIÊN / Ancestors); Nhờ vậy có thể duyệt mọi phần tử trên cây DOM, từ đó áp dụng các thiết kế khác nhau cho Website. Website có thể có nhiều hiển thị theo ngữ cảnh khác nhau.
+ Phương thức Find() và Children() rất hữu ích