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); 
});