Question

I’ve the next HTML code and I would to get the id attribute from a HTML list( id=”seconde”) whith jquery.

     <div id="navigation">
<ul    class=" sf-menu sf-vertical " >
            <li >

                <a href="#">Pollo</a>
                <ul>
                    <li>
                        <a href="#">Prime lavorazioni</a>

                    </li>
                    <li id = "seconde">
                        <a href="#">Seconde lavorazioni</a>

                    </li>
                    <li>
                        <a href="#">Terze lavorazioni</a>

                    </li>

                </ul>
            </li>



        </ul>
        </div>

Thi is my .js:

    $("ul.sf-menu li ").click(function(){

          var oID = $(this).attr("id");
          alert(oID);
        });

but doesn’t work. any idea? thanks

Answer 1

The problem is, that your list is nested. You have a DOM tree of ul.sf-menu > li > ul > li

So when you click on a list item, your callback actually fires twice because two list items have been clicked.

You might consider changing your code to this, so only list items are matched that are children of an ul:

$("ul.sf-menu ul > li ").click(function(){

      var oID = $(this).attr("id");
      alert(oID);
});

Alternatively, you might remove the id from the li-items and add them rather to the links itself.