单击时选择最低嵌套选择器

时间:2012-10-15 22:54:17

标签: jquery click nested

我想点击$('.sub-menu')选择器并返回被点击的lowerst嵌套项,而不是最高的。例如,当我点击“enlish”时,返回“root”,因为“english”是“root”的孩子。当我选择“英语”时,我想要“英语”。

<div ID="browse_container">
    <div class="sub-menu">Root
        <div class="sub-menu">English</div>
        <div class="sub-menu">Maths
            <div class="sub-menu">Year 1</div>
            <div class="sub-menu">Year 2</div>
        </div>
        <div class="sub-menu">▷ Science</div>
    </div>
</div>

我的剧本很简单:

$('.sub-menu, #root').on('click', function(event){
    alert($(this).text())
});

3 个答案:

答案 0 :(得分:3)

$('.sub-menu, #root').on('click', function(event){
    alert($(event.target).text());
    return false; // I stop the bubble
});

您想要event.target read more

请参阅此处示例http://jsfiddle.net/qeVXa/

答案 1 :(得分:2)

啊,回答是使用$(event.target).text()

而不是$(this).text()

答案 2 :(得分:0)

试试此演示** http://jsfiddle.net/H5Eq7/

API - .stopPropagation http://api.jquery.com/event.stopPropagation/

stopPropagation

  

阻止事件冒泡DOM树,防止任何事件   家长处理人员被告知该事件。

这应符合原因:)

<强>代码

$(document).ready(function() {
    $('.sub-menu, #root').on('click', function(event) {
        event.stopPropagation();
        alert($(this).text())
    });

});​