.children()

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

.children(): Lấy thành phần con trực tiếp của mỗi 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

$('div').children();

.children("bộ chọn")

$('div').children(".child");

.children()

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(){
    $('ul.list').children().css('color','red');
});
</script>
</head>

<body>
<ul class="list">
    <li>li thứ nhất</li>
    <li>li thứ hai</li>
</ul>

<ul>
    <li>li thứ nhất</li>
    <li>li thứ hai</li>
    <li>li thứ ba</li>
</ul>
</body>
</html>

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

Ta thấy tất cả thành phần con của ul.list đều đã được thêm css color: red.

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

Trước khi có jQuery	Sau khi có jQuery
<ul class="list"> <li>li thứ nhất</li> <li>li thứ hai</li> </ul> <ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> </ul>	<ul class="list"> <li style="color: red;">li thứ nhất</li> <li style="color: red;">li thứ hai</li> </ul> <ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> </ul>

Ví dụ thêm

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(){
    $('ul.list').children().css('border','1px solid blue');
});
</script>
</head>

<body>
<ul class="list">
    <li>li thứ nhất</li>
    <li>
        <p>li thứ hai</p>
        <ul>
            <li>li con thứ nhất</li>
            <li>li con thứ hai</li>
        </ul>
    </li>
    <li>li thứ ba</li>
</ul>

<ul>
    <li>li thứ nhất</li>
    <li>li thứ hai</li>
    <li>li thứ ba</li>
</ul>
</body>
</html>

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

Ta thấy tất cả thành phần con trực tiếp của ul.list đều đã được thêm style border: 1px solid red, thành phần cháu bên trong không được chọn: p, ul con.

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

Trước khi có jQuery	Sau khi có jQuery
<ul class="list"> <li>li thứ nhất</li> <li> <p>li thứ hai</p> <ul> <li>li con thứ nhất</li> <li>li con thứ hai</li> </ul> </li> <li>li thứ ba</li> </ul> <ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> </ul>	<ul class="list"> <li style="border: 1px solid blue">li thứ nhất</li> <li style="border: 1px solid blue"> <p>li thứ hai</p> <ul> <li>li con thứ nhất</li> <li>li con thứ hai</li> </ul> </li> <li style="border: 1px solid blue">li thứ ba</li> </ul> <ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> </ul>

.children("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(){
    $('ul.list').children(".itemFirst").css('color','red');
});
</script>
</head>

<body>
<ul class="list">
    <li class="itemFirst">li thứ nhất</li>
    <li>li thứ hai</li>
</ul>

<ul>
    <li>li thứ nhất</li>
    <li>li thứ hai</li>
    <li>li thứ ba</li>
</ul>
</body>
</html>

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

Ta thấy chỉ có thành phần con của ul.list với bộ chọn là ".itemFirst" được thêm css color: red.

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

Trước khi có jQuery	Sau khi có jQuery
<ul class="list"> <li>li thứ nhất</li> <li>li thứ hai</li> </ul> <ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> </ul>	<ul class="list"> <li style="color: red;">li thứ nhất</li> <li style="color: red;">li thứ hai</li> </ul> <ul> <li>li thứ nhất</li> <li>li thứ hai</li> <li>li thứ ba</li> </ul>

.change()

.clearQueue()