.closest()

Định nghĩa và sử dụng

.closest(): Chọn thành phần đầu tiên tính từ thành phần cha trở lên của chính thành phần được chọn.
Khác với .parent() chỉ chọn thành phần cha của chính nó, .closest() có thể chọn cả thành phần cấp cao hơn cấp cha.

Cấu trúc

Đã được thêm vào từ phiên bản 1.3

$('p').closest('.className');

Đã được thêm vào từ phiên bản 1.6

.closest('thành phần')

$('p').closest('ul');

.closest('bộ chọn')

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(){
    $('li.item01_02').closest('.parent01').css('border','1px solid red');
});
</script>
</head>

<body>
<ul class="parent01">
<li class="item01">li thứ nhất</li>
<li class="item02">
    <p>li thứ hai</p>
    <ul class="parent02">
        <li class="item01_01">li con thứ nhất</li>
        <li class="item01_02">li con thứ hai</li>
        <li class="item01_03">li con thứ ba
            <ul class="parent03">
                <li class="item01_03_01">li con thứ nhất</li>
                <li class="item01_03_02">li con thứ hai</li>
                <li class="item01_03_03">li con thứ ba</li>
            </ul>
        </li>
    </ul>
</li>
<li class="item03">li thứ ba</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần ul có class="parent01" (thực ra là thành phần cấp "ông") được chọn, trường hợp này không thể làm được với hàm .parent().

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<ul class="parent01"> <li class="item01">li thứ nhất</li> <li class="item02"> <p>li thứ hai</p> <ul class="parent02"> <li class="item01_01">li con thứ nhất</li> <li class="item01_02">li con thứ hai</li> <li class="item01_03">li con thứ ba <ul class="parent03"> <li class="item01_03_01">li con thứ nhất</li> <li class="item01_03_02">li con thứ hai</li> <li class="item01_03_03">li con thứ ba</li> </ul> </li> </ul> </li> <li class="item03">li thứ ba</li> </ul>	<ul class="parent01" style="border: 1px solid red;"> <li class="item01">li thứ nhất</li> <li class="item02"> <p>li thứ hai</p> <ul class="parent02"> <li class="item01_01">li con thứ nhất</li> <li class="item01_02">li con thứ hai</li> <li class="item01_03">li con thứ ba <ul class="parent03"> <li class="item01_03_01">li con thứ nhất</li> <li class="item01_03_02">li con thứ hai</li> <li class="item01_03_03">li con thứ ba</li> </ul> </li> </ul> </li> <li class="item03">li thứ ba</li> </ul>

Trước khi có jQuery

Sau khi có jQuery

.closest('thành phần')

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(){
    $('li.item01_02').closest('ul').css('border','1px solid red');
});
</script>
</head>

<body>
<ul>
<li class="item01">li thứ nhất</li>
<li class="item02">
    <p>li thứ hai</p>
    <ul>
        <li class="item01_01">li con thứ nhất</li>
        <li class="item01_02">li con thứ hai</li>
        <li class="item01_03">li con thứ ba
            <ul>
                <li class="item01_03_01">li con thứ nhất</li>
                <li class="item01_03_02">li con thứ hai</li>
                <li class="item01_03_03">li con thứ ba</li>
            </ul>
        </li>
    </ul>
</li>
<li class="item03">li thứ ba</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần ul cha gần nhất được chọn.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<ul> <li class="item01">li thứ nhất</li> <li class="item02"> <p>li thứ hai</p> <ul> <li class="item01_01">li con thứ nhất</li> <li class="item01_02">li con thứ hai</li> <li class="item01_03">li con thứ ba <ul> <li class="item01_03_01">li con thứ nhất</li> <li class="item01_03_02">li con thứ hai</li> <li class="item01_03_03">li con thứ ba</li> </ul> </li> </ul> </li> <li class="item03">li thứ ba</li> </ul>	<ul> <li class="item01">li thứ nhất</li> <li class="item02"> <p>li thứ hai</p> <ul style="border: 1px solid red;"> <li class="item01_01">li con thứ nhất</li> <li class="item01_02">li con thứ hai</li> <li class="item01_03">li con thứ ba <ul> <li class="item01_03_01">li con thứ nhất</li> <li class="item01_03_02">li con thứ hai</li> <li class="item01_03_03">li con thứ ba</li> </ul> </li> </ul> </li> <li class="item03">li thứ ba</li> </ul>

Trước khi có jQuery

Sau khi có jQuery

.clone()

.contents()