jqueryセレクタのスペースは何を意味しますか？

Question

今日私は説明できなかった反応に遭遇しましたが、今日の非常に基本的なJqueryで作業していて、あなたの誰かが私にこれらの結果につながることを説明できると期待していました。 （ここでは単純化）

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

アイデアは、このコードを使用して、最後のオブジェクトの属性を設定することでした：

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

は、私はここのコードが間違っていた、適切な検索のセレクタは「div要素でなければなりません今理解します.Object：la st 'ですが、私が理解していない結果です。私は最初のコードを実行したときに発生しました：

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

私の最初のセレクタが子ノードの属性を設定する方法を教えてもらえますか？

Answer 1

スペースは子孫との一致を示します。すべてのスペースで、（少なくとも）1つのレベルを降順にして、セレクタを前に選択した要素の子に適用します。例えば

次ながら

div.container.post 

は、containerとpostクラスで<div>と一致します：

div.container .post 

...クラスで任意の要素にマッチしますpost から、containerのクラスに由来する。

これは<div class="container"><p class="post"></p></div>と一致しますが、それはまた関係なく深くそれが入れ子になってどのように、どの.postと一致しません：

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

あなたが段階的に一致すると考えることができます：div.containerに一致する最初の要素が発見され、そしてそれらの要素（およびそのすべてのサブ要素）のそれぞれが.postに対して検索されます。あなたのしている場合には

、 div.Object :last最初は Objectクラスで、すべての <div>のタグを見つけ、その後、 :lastのマッチング要素のためのそれらのそれぞれの中で検索し、それは、そのコンテナ内の最後の要素である任意の要素です。これは、 <div index="1">stuff</div>と <div>stuff</div>の両方に適用されます。

スペースは、複数の呼び出しをfindに連鎖するのとまったく同じ方法で動作します。したがって、その動作を理解すれば、スペースがセレクタにどのように影響するかを理解できます。これらは同じです：

のjQueryを使用して

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

Answer 2

$('div.ObjectContainer').find('div.Object :last')ワイルドカード効果が発生します。 psudoクラスの子を探します：最後に。したがって、単にdiv：lastを選択しただけです。 $('div.ObjectContainer').find('div.Object div:last')

Answer 3

、あなたはそれがID、クラス名、タグタイプ、などですまたはちょうどあなたが

をしたい、ネストされた子を指定し、最初の親を見つける提供することで、任意のDOM OBJを見つけることができますたとえば、最初のDivを見つけることができます。このクエリ

$('.ObjectContainer .Object:first') 

によってオブジェクトだから、jQueryのセレクタのスペースが親ノードを分離し、それが子供