tôi đang có một danh sách ul likhác biệt giữa: đầu tiên và: first-child không rõ ràng
<ul>
<li>Parent
<ul>
<li>
child1
</li>
<li>
child2
</li>
</ul>
</li>
</ul>
và tôi đang cố gắng sử dụng một selector jQuery('ul li:first') và jQuery('ul li:first-child') cả việc đưa ra cùng một kết quả này làm cho tôi bối rối về sự khác biệt giữa hai là có một ví dụ mà làm rõ sự khác biệt giữa hai selectors
Từ Docs chính thức:
: lớp giả đầu tiên tương đương thành: eq (0). Nó cũng có thể được viết là : lt (1). Mặc dù điều này chỉ khớp với một phần tử đơn lẻ ,: con đầu tiên có thể khớp nhiều hơn một: Một cho mỗi số cấp độ gốc.
Trong khi :first chỉ khớp với một phần tử duy nhất, bộ chọn :first-child có thể khớp nhiều hơn một: một cho mỗi cấp độ gốc. Điều này tương đương với :nth-child(1).
http://api.jquery.com/first-selector/
Cập nhật:
Dưới đây là một ví dụ sử dụng :first-child:
Bạn có thể xem soruce của nó và chỉnh sửa cho mình. Nếu bạn thay thế :first-child bằng :first, nó sẽ chỉ làm nổi bật từ đầu tiên ở đó. Đây là những gì được định nghĩa cho chúng.
Và đây là ví dụ sử dụng :first:
cảm ơn sarfraj, bạn có thể sửa đổi ví dụ của tôi khi con đầu tiên sẽ mang lại kết quả khác với: đầu tiên. xin lỗi vì đã không làm theo đúng những gì bạn đã đề cập –
@sushil bharwani: Xem câu trả lời cập nhật của tôi. – Sarfraz
cảm ơn rất nhiều .. có điểm rõ ràng –
Đôi khi, nhưng không phải lúc nào, kết quả là (và nên) không thay đổi.
Với HTML của bạn:
jQuery('ul li:first').length; // Returns 1
jQuery('ul li:first-child').length; // Returns 2
Vì vậy, bạn có thể thấy, rằng dòng đầu tiên được trở về chỉ phần tử đầu tiên li.
Dòng thứ hai trả về cả hai li các phần tử là first-child của phụ huynh.
:first trả về giá trị đầu tiên trong tập hợp phù hợp.
:first-child trả về các phần tử là phần tử con đầu tiên của cha mẹ.
Phần tử li đầu tiên trong HTML của bạn cũng là con đầu tiên, mặc dù sử dụng :first-child mang lại nhiều kết quả hơn khi bạn kiểm tra thuộc tính length.
Bạn thực sự có thể kết hợp hai bộ chọn nếu bạn chỉ muốn kết hợp đầu tiên là con đầu tiên.
jQuery('ul li:first-child:first').length; // Returns one
http://www.jsfiddle.net/gDQQL/1 - ví dụ về các yếu tố nào được kết hợp – gnarf
@gnarf - Cảm ơn bạn đã đăng ví dụ. :) – user113716
cảm ơn lời giải thích của bạn. Rất rõ ràng của nó bây giờ –
Từ ví dụ của bạn:
$('ul li'); // Returns all 3 li's
// <li> Parent ... </li>
// <li> child1 </li>
// <li> child2 </li>
$('ul li:first'); // Returns the first li of all matching li's from above
// <li> Parent ... </li>
Giả sử chúng ta có tất cả ba kết quả từ bộ chọn đầu tiên $("ul li") thì :first-child sẽ lọc ra bất kỳ yếu tố từ danh sách đó mà không phải là đứa trẻ đầu tiên của nó là mẹ . Trong trường hợp này, <li> child2 </li> bị lọc ra vì đó là con thứ hai của số <ul>.
$('ul li:first-child'); // Returns all li's that are the first child of any ul
// <li> Parent .. </li>
// <li> child1 </li>
Ngoài ra, đối với bộ chọn đầu tiên, phần tử phải là con đầu tiên trong DOM và không nằm trong tập kết quả jQuery. Ví dụ: với cấu trúc đã cho:
<div>
<h1>First</h1>
<span>Second</span>
<span>Third</span>
</div>
truy vấn dưới đây sẽ mang lại 0 kết quả là <span> không phải là con đầu tiên của div.
$("div span:first-child")
Một cách tốt để hiểu first-child sẽ phải suy nghĩ về nó như một bộ lọc sẽ lọc ra bất kỳ phần tử trong tập hợp kết quả hiện tại, nếu nó không phải là đứa trẻ đầu tiên của công ty mẹ của nó.
Đây là một minh chứng về những gì $("prev next:first") và $("prev next:first-child") thực sự sẽ chọn:
<prev>
<next>...</next> // <- both `:first` & `:first-child`
<next>...</next>
<next>...</next>
</prev>
<prev>
<next>...</next> // <- only `:first-child` (NOT `:first`)
<next>...</next>
<next>...</next>
</prev>
:first lợi nhuận chỉ là kết quả đầu tiên, trong khi lợi nhuận :first-child một kết quả mỗi phụ huynh (nếu có).
khi chúng tôi sử dụng :first nó chọn phần tử con đầu tiên của phần tử được chỉ định đầu tiên và khi chúng tôi sử dụng :first-child, hãy chọn tất cả phần tử con đầu tiên của phần tử được chỉ định.
$(document).ready(function(){
$("#btnfirst").click(function(){
$("ul li:first").hide();
});
$("#btnfirstChild").click(function(){
$("ul li:first-child").hide();
});
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p>List 1:</p>
<ul>
<li>Book</li>
<li>pen</li>
<li>pencil</li>
</ul>
<p>List 2:</p>
<ul>
<li>Book</li>
<li>pen</li>
<li>pencil</li>
</ul>
<button Id="btnfirst">:first</button>
<button Id="btnfirstChild">:first-child</button>
</body>
</html>
Tôi đặt cược nó không thực sự đem lại cho bạn kết quả tương tự. – Pointy
vâng bạn có thể viết tôi chắc chắn làm điều gì đó sai ở đây :-) –
Nó có thể xuất hiện để cung cấp cho cùng một kết quả nếu bạn đã làm một cái gì đó như 'jQuery ('ul li: first-child'). Html()', chỉ hiển thị HTML của kết quả * đầu tiên *, mặc dù có hai. – user113716