Question

我有一个多级无序列表（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'？

Answer 1

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

如果您的意思是要排除嵌套li的{{1}}元素...

ul

http://jsfiddle.net/3TsNp/

Answer 2

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

li

<强> Demo

$('ul.onlyme').delegate('li', 'click', function(e){ alert('bingo!'); e.stopPropagation(); });参考：http://api.jquery.com/delegate/

Answer 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()函数，该函数执行速度更快。

jQuery子选择器：仅选择顶级子元素

3 个答案: