jQuery的每個菜單項，但不從子菜單項

Question

<ul class="main-menu"> 
    <li> 
     <a href="domain.com/host">Host</a> 
     <ul class="sub-menu nav"> 
      <li> 
       <a href="domain.com/host/party">Party</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

$('.main-menu li a').each(function(ev){ 
     var name = $(this).text(); 
     console.log(name); 
    }); 

上面的代碼同時列出Host和Party當所有我想要的是Host

jsFiddle

Answer 1

使用子選擇器代替後代選擇：

$('.main-menu>li>a').each(function(ev){ 
    var name = $(this).text(); 
    console.log(name); 
}); 

有關css選擇器的更多信息，請參閱http://www.w3.org/TR/css3-selectors/或者查看jQuery選擇器頁面的http://api.jquery.com/category/selectors/。

Answer 2

您可以使用>用於選擇與特定元素父母，它只能看到標記結構的一個級別，沒有更深。

$('.main-menu>li>a').each(function(ev){ 
     var name = $(this).text(); 
     console.log(name); 
}); 

Fiddle

有關CSS選擇器的詳細信息，請訪問here

Answer 3

$('.main-menu > li > a').each(function(ev){ 
     var name = $(this).text(); 
     console.log(name); 
    }); 

添加的>是你所需要的 - 這只是表明直接後裔。它被稱爲child selector

Answer 4

您可以使用父子代替祖先後代。

Live Demo

$('.main-menu > li > a').each(function(ev){ 
    var name = $(this).text(); 
    console.log(name); 
}); 

Answer 5

使用child-selector：

$('.main-menu>li>a').each(function(ev){ 
//code here 
}); 

Answer 6

使用子選擇器（>）。

文檔（子選擇）：http://api.jquery.com/child-selector/

FIDDLE演示

$('.main-menu > li > a').each(function(ev){ 
     var name = $(this).text(); 
     console.log(name); 
});