需要从jquery中选择li菜单中的链接文本

时间:2013-05-14 19:21:00

标签: jquery

当我点击我的li菜单时,我需要获取此链接文本。问题是菜单是一棵树,我得到一个带有父文本的当前文本。

例如 - 当我进入"测试3"我也得到了"测试2"。在这种情况下,我只需要获得"测试3"。

我只能更改jquery脚本,html代码生成cms。

我的代码:

<script>
$(document).ready(function(){
    $("#menu li").click(function() {
        var text = $(this).children('a').text();
        alert(text);        
    });
});
</script>
<div id="menu">
        <ul>
            <li><a href="#">test 1</a></li>
            <li>
                <a href="#">test 2</a>
                <ul class="sub_menu">
                    <li><a href="#">test 3</a></li>
                    <li><a href="#">test 4</a></li>
                </ul>
            </li>
            ....
        </ul>
    </div>

3 个答案:

答案 0 :(得分:1)

为什么不先听a元素?

$(document).ready(function(){
    $("#menu a").click(function() {
        var text = $(this).text();
        alert(text);        
    });
});

http://jsfiddle.net/VQMqm/

答案 1 :(得分:1)

$("#menu li").click(function(e) {
    e.stopPropagation();
    var target = e.target,
        text = target.textContent || target.innerText;
    console.log(text);        
});

JS Fiddle demo

答案 2 :(得分:0)

使用事件委托来使用单个侦听器并像其他人一样监听锚点:

$(document).ready(function() {
  $("#menu").on("click", "a", function(e) {
    var text = $(this).text();
    alert(text);

    // Anchors are navigation, and the default action is to
    // load the "href" attribute. Calling 'preventDefault'
    // prevents that navigation.
    e.preventDefault();
  });
});