选择器之间的区别

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级别定位元素时，它非常有用。