Không gian trong bộ chọn jquery có nghĩa là gì?

Question

Tôi gặp phải một phản ứng tôi không thể giải thích hôm nay khi làm việc với một số Jquery rất cơ bản ngày hôm nay và tôi hy vọng một trong các bạn có thể giải thích cho tôi những gì đang xảy ra để dẫn đến những kết quả này

Vì vậy, tôi có một mô hình DOM (giản thể ở đây)

<div class="ObjectContainer"> 
    <div class="Object"> 
     <div>stuff</div> 
    <div class="Object"> 
     <div>stuff</div> 

ý tưởng là để thiết lập một thuộc tính trên Object cuối cùng sử dụng mã này:

$('div.ObjectContainer').find('div.Object :last').attr("index", "1"); 

tôi hiểu bây giờ mã ở đây là không chính xác và tìm chọn đúng đắn nên 'div .Object: la st ', nhưng đó là kết quả tôi không hiểu. Khi tôi thực hiện mã đầu tiên, điều này đã xảy ra:

<div class="ObjectContainer"> 
    <div class="Object"> 
     <div index="1">stuff</div> 
    <div class="Object"> 
     <div>stuff</div> 

Ai đó có thể giải thích cho tôi cách bộ chọn ban đầu của tôi quản lý thuộc tính trên nút con?

Answer 1

Dấu cách cho biết khớp với con cháu. Đối với mọi không gian, bạn giảm dần (ít nhất) một cấp và áp dụng bộ chọn của bạn cho con của các phần tử đã chọn trước đó.

Ví dụ:

div.container.post 

sẽ phù hợp với một <div> với containervàpost lớp, trong khi những điều sau:

div.container .post 

... sẽ phù hợp với bất kỳ yếu tố với lớp post quay xuống từ số <div> với lớp là container.

này sẽ phù hợp <div class="container"><p class="post"></p></div>, nhưng nó cũng sẽ phù hợp với bất kỳ .post, bất kể có bao lồng nhau sâu sắc đó là:

<div class="container"> 
    <div> 
    <div> 
     <a class="post"> <!-- matched --> 
    </div> 
    </div> 
</div> 

Bạn có thể nghĩ về nó như phù hợp với từng giai đoạn: yếu tố đầu tiên phù hợp với div.container được tìm thấy, và thì mỗi phần tử (và tất cả các phần tử con của chúng) đều được tìm kiếm phù hợp với .post.

Trong trường hợp bạn, div.Object :last đầu tiên tìm thấy tất cả <div> thẻ với lớp Object, và sau đó tìm kiếm trong mỗi người cho các yếu tố phù hợp với :last, có nghĩa là bất kỳ yếu tố nào là yếu tố cuối cùng trong bao bì của nó. Điều này áp dụng cho cả hai <div index="1">stuff</div> và <div>stuff</div>.

Không gian hoạt động chính xác giống như chuỗi nhiều cuộc gọi đến find, vì vậy nếu bạn hiểu cách hoạt động, bạn có thể hiểu cách khoảng trống ảnh hưởng đến công cụ chọn.Đây là giống hệt nhau:

$('div#post ul.tags li'); 
$('div#post').find('ul.tags').find('li'); 

Answer 2

$('div.ObjectContainer').find('div.Object :last') dẫn đến hiệu ứng thẻ hoang dã. nó tìm kiếm bất kỳ đứa trẻ nào có lớp psudo là: last. Vì vậy, nó chỉ đơn giản là chọn div: cuối cùng. Nó tương đương với $('div.ObjectContainer').find('div.Object div:last')

Answer 3

Sử dụng jQuery, bạn có thể tìm thấy bất kỳ obj DOM bằng cách cung cấp đó là ID, tên lớp, loại thẻ, vv hoặc chỉ cần tìm phụ huynh đầu tiên sau đó xác định con lồng nhau bạn muốn

Đối ví dụ, bạn có thể tìm Div đầu tiên. Đối tượng bằng cách truy vấn này

$('.ObjectContainer .Object:first') 

Vì vậy, không gian trong jQuery selector tách node cha và đó là trẻ em