jQuery子选择器：只选择顶级子元素答案

【问题标题】：jQuery child selector: only select top level child elementsjQuery子选择器：只选择顶级子元素
【发布时间】：2012-01-31 18:12:34
【问题描述】：

我有一个多级无序列表（ul，li）：

<ul class="onlyme">
    <li>one</li>
    <li>two</li>
    <li>
        <ul>
            <li>aaa</li>
            <li>bbb</li>
        </ul>
    </li>
</ul>

我只想选择 ul.onlyme 的第一个子元素。我正在使用以下 jQuery 来选择它们

$('ul.onlyme > li').click(function(){
    alert('bingo');
});

如果我单击aaa 或bbb，则会出现两次警报。我需要做些什么来确保它只选择 li 的：'one' 和 'two'？

【问题讨论】：

如果您将警报行更改为 : alert($(this).text());
我不知道您是要完全排除最后一个 <li> 还是只阻止它触发两次警报。您问题的不同部分都暗示了两者。

标签： jquery

【解决方案1】：

“我需要做些什么来确保它只选择 li 的：'one' 和 'two'？”

如果您的意思是要排除具有嵌套ul 的li 元素...

$('ul.onlyme > li:not(:has(ul))').click(function(){

http://jsfiddle.net/3TsNp/

【讨论】：

不错的解决方案。我不明白的是为什么较低级别的 li 不传播他们的事件
您的选择器可以加速很多。 $('.onlyme').children().not(':has(ul)')。必须完成的字符串工作越少越好。
@Alp：确实如此，但是没有处理程序绑定到那些 li 元素，因为它们被排除在初始 DOM 选择之外。只选择了前两个lis，所以只有这两个有处理程序
@Jasper：我同意使用:has()，因为它是一个非标准选择器。其余部分将完全取决于运行选择器的浏览器。
@amnotiam 查看这个 jsperf：jsperf.com/jquery-function-selectors-vs-strings（请注意，我的 IE6 结果有大约 50% 的错误）。

【解决方案2】：

相反，您可以使用 delegate 并仅在 ul 元素上附加点击处理程序，并将 li 作为要监听的元素选择器。试试这个。

$('ul.onlyme').delegate('li', 'click', function(e){
    alert('bingo!');
    e.stopPropagation();
});

Demo

.delegate()参考：http://api.jquery.com/delegate/

【讨论】：

这可以很好地确保嵌套的那些不会触发处理程序，但从问题看来，OP 只希望前两个 li 元素触发它。 “确保它只选择 li's with: 'one' and 'two'?” 但标题与此不符，所以我不确定真正想要什么。跨度>

【解决方案3】：

发生的情况是嵌套的<ul> 元素及其子<li> 元素正在将click 事件传播到它们的父<li> 元素，这些元素附加了click 事件处理程序。如果您停止嵌套元素的传播，您只会在直接单击顶级 <li> 元素时收到警报：

//bind click event handler to the top-level list-item elements
$('.onlyme').children('li').click(function(){
    alert('bingo');

//bind a click event handler to the lower-level list-items
}).find('li').click(function () {

    //simply return false to stop the propagation of this click event
    return false;
});

这是一个演示：http://jsfiddle.net/jmpdr/

注意，我将> 选择器更改为.children() 函数，该函数将执行得更快。

【讨论】：

如果你打算绑定一个处理程序只是为了停止传播，你也可以做.bind('click',false)。
有趣，我从没想过这样做。不能说我使用事件处理程序只返回 false。谢谢。