Người Viết : ViKiMi Editor

Sử dụng dễ dàng các phương thức Parent, Parents, ParentsUntil giúp tạo giao diện linh hoạt
Khi xây dựng Website, công việc của một Nhà Phát Triển là tạo ra các thiết kế và hiệu ứng cho mọi phần tử HTML của Website. Vì vậy, Thư viện jQuery đã cung cấp rất nhiều phương thức hỗ trợ để có thể tối ưu công việc này. Các phương thức cần thiết giúp tìm kiếm các phần tử, từ đó có thể áp dụng các thiết kế và hiệu ứng cho các phần tử. Thật hữu ích !
Thư viện jQuery cung cấp rất nhiều phương thức giúp tìm kiếm phần tử Ancestors mà bạn quan tâm.
Ancestors là các phần tử :
+ Parent
+ Grandparent
+ Great-grandparent
+ So on .
Các phương thức sẽ duyệt cây DOM để tìm ra các phần tử phù hợp.
Có 3 phương thức sau đây :
+ Phương thức Parent()
+ Phương thức Parents()
+ Phương thức ParentsUntil()
CÁCH SỬ DỤNG CÁC PHƯƠNG THỨC :
A ] PHƯƠNG THỨC Parent()
Phương thức này chỉ trả phần tử cha trực tiếp của phần tử được chọn.
Phương thức này chỉ duyệt một cấp duy nhất trong cây DOM.
CÚ PHÁP :
$( SELECTOR ). Parent()
Một ví dụ sử dụng kỹ thuật xâu chuỗi các phương thức để tạo hiệu ứng cho phần tử cha trực tiếp của phần tử được chọn.
Giúp tạo thiết kế & hiệu ứng cho phần tử cha trực tiếp của phần tử được chọn.
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<style>
/* Kiểu 1 : Tạo kiểu CSS cho tất cả các phần tử
* bên trong phần tử Tổ Tiên (Không bao gồm tổ tiên)
* với border, color, padding, margin
**/
.totien * {
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>
$(document).ready(function(){
/* Kiểu 2 : Tìm kiếm phần tử cha trực tiếp của <span>
* Là direct parent 1 , direct parent 2
* tạo kiểu color, border : blue
* giúp phân biệt với phần còn lại
**/
$("span").parent().css({"color": "blue", "border": "2px solid blue"});
});
</script>
</head>
<body>
<div class="totien">
<div style="width:500px;">div (great-grandparent 1)
<ul>ul (grandparent 1)
<li> li (direct parent 1 / Phần tử cha trực tiếp 1)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (great-grandparent 2)
<ul>ul (grandparent 2)
<li> li (direct parent 2 / Phần tử cha trực tiếp 2)
<span>span</span>
</li>
</ul>
</div>
</div>
</body>
</html>
Hình Ảnh Kết Quả ::

B ] PHƯƠNG THỨC Parents()
Phương thức này trả về tất cả phần tử cha trực tiếp của phần tử được chọn.
CÚ PHÁP :
$( SELECTOR ). Parents()
$( SELECTOR ). Parents(param1, param2, … , paramN)
+ B – 1 Không truyền tham số
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<style>
/* Kiểu 1 : Tạo kiểu CSS cho tất cả các phần tử
* bên trong body, .totien, .totien *
* với border, color, padding, margin
**/
body, .totien, .totien * {
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>
$(document).ready(function(){
/* Kiểu 2 : Tìm kiếm tất cả phần tử cha của <span>
* tạo kiểu color, border : blue
* giúp phân biệt với phần còn lại
**/
$("span").parents().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
Body
<div class="totien"> div (great-great-grandparent)
<div style="width:500px;"> div (great-grandparent)
<p>p (direct parent)
<span> span </span>
</p>
</div>
</div>
</body>
<!-- <html> Cũng là một tổ tiên -->
</html>
Hình Ảnh Kết Quả :
Trước khi tạo kiểu cho tất cả phần tử Cha của <Span>

Sau khi tạo kiểu cho tất cả phần tử Cha của <Span>

+ B – 2 Có Truyền tham số
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<style>
/* Kiểu 1 : Tạo kiểu CSS cho tất cả các phần tử
* bên trong phần tử Tổ Tiên (Không bao gồm tổ tiên)
* với border, color, padding, margin
**/
.totien * {
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>
$(document).ready(function(){
/* Kiểu 2 : Tìm kiếm tất cả phần tử cha <ul>, <p> của <span>
* tạo kiểu color, border : red
* giúp phân biệt với phần còn lại
**/
$("span").parents("ul, p").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="totien">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul> ul (grandparent)
<li>li (direct parent)
<span> span </span>
</li>
</ul>
</div>
<div style="width:500px;">div (grandparent)
<p> p (direct parent)
<span> span </span>
</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

C ] PHƯƠNG THỨC ParentsUntil()
Phương thức này trả về tất cả các phần tử tổ tiên giữa hai đối số đã cho.
CÚ PHÁP :
$( SELECTOR ). parentsUntil( Param )
EXAMPLE ::
<html>
<head>
<style>
/* Kiểu 1 : Tạo kiểu CSS cho tất cả các phần tử
* bên trong phần tử Tổ Tiên (Không bao gồm tổ tiên)
* với border, color, padding, margin
**/
.totien * {
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>
$(document).ready(function(){
/* Kiểu 2 : Tìm kiếm tất cả phần tử cha
* nằm giữa #span1 , #div1
* nằm giữa #span2 , #div2
* tạo kiểu color, border : red , blue
* giúp phân biệt với phần còn lại
**/
$("#span1").parentsUntil("#div1").css({"color": "red", "border": "2px solid red"});
$("#span2").parentsUntil("#div2").css({"color": "blue", "border": "2px solid blue"});
});
</script>
</head>
<body class="totien"> body (great-great-grandparent)
<div id="div1" style="width:500px;">div 1 (great-grandparent)
<ul>ul (grandparent 1)
<li>li (direct parent 1)
<span id="span1">span</span>
</li>
</ul>
</div>
<div id="div2" style="width:500px;">div 2 (great-grandparent)
<ul>ul (grandparent 2)
<li>li (direct parent 2)
<span id="span2">span</span>
</li>
</ul>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

Thư viện jQuery cung cấp cho chúng ta rất nhiều phương thức có thể thao tác tìm kiếm các phần tử tổ tiên của một phần tử được chọn. Dựa vào kết quả tìm được chúng ta có thể tạo ra các thiết kế dựa vào các hoàn cảnh khác nhau giúp tạo Website hướng tới các Events hoặc người dùng, đối tượng khác nhau. Qua đó sự linh hoạt cao hơn.
+ Có thể tạo Website theo bối cảnh khác nhau.