Đị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

.closest('bộ chọn')

$('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>

.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>