選擇器之間的區別

Question

這兩個選擇器在執行相同的結果時我很困惑。所以，我只是想，爲什麼我們要使用>選擇

$(function(){ 
$('ul > li').addClass('red') 
$('ul li').addClass('red') 
}) 

HTML

<ul> 
<li>a</li> 
<li>b</li> 
<li>C</li> 
<li>d</li> 
</ul> 

Answer 1

的>用於選擇元素的直接孩子。

例如：

<ul class="root"> 
    <li>a</li> 
    <li>b</li> 
    <li> 
     <ul> 
      <li>c</li> 
     </ul> 
    </li> 
    <li>d</li> 
</ul> 

$('ul.root > li').addClass('red')將增加red類所有li除了li的是嵌套在另一個ul從上面的HTML標記。

<ul> 
    <li class="red">a</li> 
    <li class="red">b</li> 
    <li class="red"> 
     <ul> 
      <li>c</li> 
     </ul> 
    </li> 
    <li class="red">d</li> 
</ul> 

這裏爲$('ul.root li').addClass('red')只要會運用red類所有li爲您li是ul.root

<ul> 
    <li class="red">a</li> 
    <li class="red">b</li> 
    <li class="red"> 
     <ul> 
      <li class="red">c</li> 
     </ul> 
    </li> 
    <li class="red">d</li> 
</ul> 

Answer 2

<div id="MasterContainer"> 
    <div> <!-- Level 1 --> 
     <div> <!-- Level 2 --> 
     </div> 
    </div> 
    <div> <!-- Level 1 --> 
     <div> <!-- Level 2 --> 
     </div> 
    </div> 
</div> 

方案孩子：

// Will add class 'red' to both Level 1 and Level 2 divs. 
$('#MasterContainer div').addClass('red'); 

// Will add class 'red' to only Level 1 divs. 
$('#MasterContainer > div').addClass('red'); 

// Will add class 'red' to only Level 2 divs. 
$('#MasterContainer > div > div').addClass('red'); 

爲了總結它，'>'通常是v當您想要在特定的HTML/DOM級別定位元素時，它非常有用。