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

Fiddle

有关css选择器的详细信息，请访问 here

Answer 2

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

您需要添加> - 仅表示直接后代。它被称为child selector

Answer 3

您可以使用父子而不是祖先后代。

<强> Live Demo

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

Answer 4

使用 子选择器 （>）。

文档（子选择器）： http://api.jquery.com/child-selector/

FIDDLE 演示

$('.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

使用子选择器而不是后代选择器：

$('.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/。

jQuery每个菜单项但不是子菜单项

6 个答案: