Previous Lesson Next Lesson

.closest() trong jQuery

Định nghĩa và sử dụng .closest() trong jQuery

.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 .closest() trong jQuery

Đã đượ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="http://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>

Kêt quả:

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

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

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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.

Previous Lesson Next Lesson

Preview

Viết câu trả lời

.closest() trong jQuery

Định nghĩa và sử dụng .closest() trong jQuery

Cấu trúc .closest() trong jQuery

.closest('bộ chọn')

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

0 Bình luận

Danh mục bài học