javascript - 使用 jquery 从元素列表中获取 id

Question

我有下一个 HTML 代码，我想用 jquery 从 HTML 列表（id="seconde"）中获取 id 属性。

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

这是我的.js：

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

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

但不起作用。任何的想法？谢谢

Answer 1

您应该只将事件处理程序附加到内部 li 标签（并确保定义了 oID 变量，因为某些 li 标签没有“id”属性）：

$("ul.sf-menu ul li ").click(function()
{
  var oID = $(this).attr("id");
  if ( oID )
    alert(oID);
});

Answer 2

问题是，您的列表是嵌套的。你有一个 ul.sf-menu > li > ul > li 的 DOM 树

因此，当您单击列表项时，您的回调实际上会触发两次，因为已单击了两个列表项。

您可能会考虑将代码更改为此，因此仅匹配 ul 的子项的列表项：

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

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

或者，您可以从 li-items 中删除 id 并将它们添加到链接本身。

Answer 3

$("ul.sf-menu ul li ").click(function(){
    var oID = $(this).attr("id");

    if(typeof oID != 'undefined'){
        alert(oID);
    }
});​

找到目标（DOM 树）LI，我也只是验证未定义

http://jsfiddle.net/sameerast/8YwVj/

Answer 4

当您单击一个列表项时，您的回调实际上会触发两次，因为已单击了两个列表项。您仅在第二个 LI 项目中提供了 id。请在每个 LI 元素中使用 ID 并尝试以下代码。

你有一个 ul.sf-menu > li > ul > li 的 DOM 树。

您可以使用

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

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

});