Getting List Item ID, but Make Exceptional using Jquery

Question

i have a problem. I want to get the id from some list. Here's the list:

<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>

I can get the id using jquery syntax below:

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

It works perfect, but the problem is, when i click sublist id , the header list id is shows up too. Example, i click meeting point where the id is 4, then the office routine id is shows up too.

How to create some exclude so only the sublist id shows up?

Thank you.

Answer 1

Arun P johny's answer is good, but I would add something.

I would suggest that you bind the click event on the a instead of the li . this way, it will solve you probleme and you'll be able to use .preventDefault() if needed .

Example, if Office Routine have a submenu and on click, you open it (not loading another page), the code would look like that :

$('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()
    }
});

Fiddle : http://jsfiddle.net/aq8QC/2/

Of course, if' that's not needed, I would always use e.stopPropagation()

Answer 2

You need to prevent event propagation once it is handled.

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

Demo: Fiddle

Answer 3

Use the direct child selector:

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

Here is the demo Here is the documentation