Question

我有一个问题。我想从一些列表中获取id。这是清单：

<ul id="ul_navigation">
        <li><a href="<?php echo full_url(); ?>">Home</a></li>
        <li id="1"><a href="#">Office Routine</a>
            <ul>
                <li id="4"><a href="#">Meeting Points</a></li>
                <li id="5"><a href="#">Statistic 101</a></li>
                <li id="6"><a href="#">Email 101</a></li>
                <li id="7"><a href="#">General</a></li>
                <li id="8"><a href="#">Schedule</a></li>
                <li id="9"><a href="#">Smart Tips</a></li>
            </ul>
        </li>
        <li id="2"><a href="#">Procedures</a>
            <ul>
                <li id="10"><a href="#">Operation</a></li>
                <li id="11"><a href="#">Export Commercial</a></li>
                <li id="12"><a href="#">Customer Service</a></li>
                <li id="13"><a href="#">Export Document</a></li>
                <li id="14"><a href="#">Logistic</a></li>
                <li id="15"><a href="#">Finance</a></li>
                <li id="16"><a href="#">Import Document</a></li>
                <li id="17"><a href="#">Information Technology</a></li>
                <li id="18"><a href="#">Human Resource Management</a></li>
            </ul>

我可以使用下面的jquery语法获取id：

$("#ul_navigation li").click(function() {
        alert(this.id); // get id of clicked li
    });

它运作完美，但问题是，当我点击子列表ID时，标题列表ID也会显示出来。例如，我点击id为4的会面点，然后办公室例程ID也显示出来。

如何创建一些排除，只显示子列表ID？

谢谢。

Answer 1

Arun P johny's答案很好，但我会补充一些内容。

我建议你绑定a上的点击事件而不是li。通过这种方式，它可以解决您的问题，并且您将能够在需要时使用.preventDefault() 。

例如，如果Office Routine有一个子菜单并且点击，则打开它（不加载另一个页面），代码看起来像这样：

$('li ul').hide()
$("#ul_navigation li a").click(function(e) {
    var $this = $(this);
    alert($this.parent().attr('id')); // get id of clicked li
    if($this.closest('ul').is('#ul_navigation') && $this.siblings('ul').length){
        e.preventDefault();
        $this.siblings('ul').toggle()
    }
});

小提琴：http://jsfiddle.net/aq8QC/2/

当然，如果'不需要'，我会一直使用e.stopPropagation()

Answer 2

处理后，您需要阻止事件传播。

$("#ul_navigation li").click(function(e) {
    alert(this.id); // get id of clicked li
    e.stopPropagation()
});

演示：Fiddle

Answer 3

使用直接子选择器：

$("#ul_navigation > li").click(function() {
        alert(this.id); // get id of clicked li
    });

这是demo 这是documentation

获取列表项ID，但使用Jquery使Exceptional

3 个答案: