.parents()

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

.parents(): Lấy các thành phần tổ tiên của thành phần trong những thành phần phù hợp, có thể kết hợp vào bộ chọn (selector).

Cấu trúc

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

$('li').parents();

.parents("bộ chọn")

$('li').parents(".parent");

.parents()

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

<body>
<ul>
    <li>li thứ nhất</li>
    <li>li thứ hai
        <ul>
            <li class="list0201">li thứ hai 01</li>
            <li class="list0202">li thứ hai 02</li>
            <li class="list0203">li thứ hai 03</li>
        </ul>
    </li>
    <li>li thứ ba</li>
    <li>li thứ tư
        <ul>
            <li class="list0401">li thứ tư 01</li>
            <li class="list0402">li thứ tư 02</li>
            <li class="list0403">li thứ tư 03</li>
        </ul>
    </li>
    <li>li thứ năm</li>
</ul>
</body>
</html>

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

Ta thấy tất cả các thành phần tổ tiên của .list0201 đã được thêm css border: 1px solid red.

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

Trước khi có jQuery	Sau khi có jQuery
<ul> <li>li thứ nhất</li> <li>li thứ hai <ul> <li class="list0201">li thứ hai 01</li> <li class="list0202">li thứ hai 02</li> <li class="list0203">li thứ hai 03</li> </ul> </li> <li>li thứ ba</li> <li>li thứ tư <ul> <li class="list0401">li thứ tư 01</li> <li class="list0402">li thứ tư 02</li> <li class="list0403">li thứ tư 03</li> </ul> </li> <li>li thứ năm</li> </ul>	<ul style="border: 1px solid red;"> <li>li thứ nhất</li> <li style="border: 1px solid red;">li thứ hai <ul style="border: 1px solid red;"> <li class="list0201">li thứ hai 01</li> <li class="list0202">li thứ hai 02</li> <li class="list0203">li thứ hai 03</li> </ul> </li> <li>li thứ ba</li> <li>li thứ tư <ul> <li class="list0401">li thứ tư 01</li> <li class="list0402">li thứ tư 02</li> <li class="list0403">li thứ tư 03</li> </ul> </li> <li>li thứ năm</li> </ul>

Trước khi có jQuery

Sau khi có jQuery

.parents('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').parents('.list').css('border','1px solid red');
});
</script>
</head>

<body>
<ul class="list">
    <li>li thứ nhất</li>
    <li>li thứ hai
        <ul>
            <li>li thứ hai 01</li>
            <li>li thứ hai 02</li>
            <li>li thứ hai 03</li>
        </ul>
    </li>
    <li>li thứ ba</li>
    <li>li thứ tư
        <ul class="list">
            <li>li thứ tư 01</li>
            <li>li thứ tư 02</li>
            <li>li thứ tư 03</li>
        </ul>
    </li>
    <li>li thứ năm</li>
</ul>
</body>
</html>

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

Lấy thành phần tổ tiên của thành phần li, tuy nhiên chỉ thành phần tổ tiên nào có class="list" là được thêm css border: 1px solid red.

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

Trước khi có jQuery	Sau khi có jQuery
<ul class="list04"> <li>li thứ nhất</li> <li>li thứ hai <ul> <li>li thứ hai 01</li> <li>li thứ hai 02</li> <li>li thứ hai 03</li> </ul> </li> <li>li thứ ba</li> <li>li thứ tư <ul class="list04"> <li>li thứ tư 01</li> <li>li thứ tư 02</li> <li>li thứ tư 03</li> </ul> </li> <li>li thứ năm</li> </ul>	<ul style="border: 1px solid red;" class="list04"> <li>li thứ nhất</li> <li>li thứ hai <ul> <li>li thứ hai 01</li> <li>li thứ hai 02</li> <li>li thứ hai 03</li> </ul> </li> <li>li thứ ba</li> <li>li thứ tư <ul style="border: 1px solid red;" class="list04"> <li>li thứ tư 01</li> <li>li thứ tư 02</li> <li>li thứ tư 03</li> </ul> </li> <li>li thứ năm</li> </ul>

.parent()

.parentsUntil()