14/08/2018, 09:40
Child Selector (“parent > child”) trong jquery
Child Selector sẽ lựa chọn tất cả các phần tử con trực tiếp được chỉ định bởi "child" của các phần tử được chỉ định bởi "parent". Lưu ý rằng selector này sẽ chỉ chọn ra các phần tử là con cấp một của phần tử "parent". Cú pháp Cú pháp jQuery( ...
Child Selector sẽ lựa chọn tất cả các phần tử con trực tiếp được chỉ định bởi "child" của các phần tử được chỉ định bởi "parent".
Lưu ý rằng selector này sẽ chỉ chọn ra các phần tử là con cấp một của phần tử "parent".
Cú pháp
Cú pháp
jQuery( "parent > child" )
Trong đó:
- parent là một selector hợp lệ bất kì.
- child là một bộ lọc để lọc các phần tử con cần thiết.
Ví dụ
Tìm kiếm tất cả các thẻ li nằm trong thẻ ul có class=topnav và đổi màu cho chúng:
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>all demo</title>
<style>
textarea {
height: 35px;
}
div {
color: red;
}
fieldset {
margin: 0;
padding: 0;
border-awidth: 0;
}
.marked {
background-color: yellow;
border: 3px red solid;
}
</style>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
<li>Nested item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<div id="result"></div>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( "ul.topnav > li" ).css( "border", "3px double red" );
}
</script>
</body>
</html>Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
