如何从li元素中获取id？

Question

我尝试使用jquery将the.live() li元素的值作为以下代码：

$("body").on("click", "#nav li:has(ul)", function (event) {
   if (this == event.target) {
      $(this).toggleClass('clicked').children('ul').slideToggle();
      $(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp();
      $(this).siblings().removeClass('clicked').find("ul").slideUp();
   }
})

$("#content").load("content.html");

在content.html中，我放了一些这样的代码：

   <ul id="nav">
       <li value='2012'>2012
         <ul>
             <li value='Geography'>Geography</li>
             <li value='Topography'>Topography</li>
             <li value='Geological'>Geological</li>
             <li value='Seismology'>Seismology</li>
             <li value='Volcanology'>Volcanology</li>
             <li value='Oceanography'>Oceanography</li>
             <li value='Hydrogeology'>Hydrogeology</li>
             <li value='Meteorology'>Meteorology</li>
             <li value='Demography'>Demography</li>
         </ul>
       </li>
   </ul>

那么，当我单击li元素alert($('li').attr('value')时，如何获取它的值呢？

Answer 1

在事件侦听器中，向事件侦听器添加额外的else条件。

除非被阻止，否则该事件将始终在单击#nav li:has(ul)元素(其后代)时触发。检查event.target元素是否指向<li>。

$("body").on("click", "#nav li:has(ul)", function (event) {
   var $target = $(event.target);
   if (this == event.target) {
      $target.toggleClass('clicked').children('ul').slideToggle()
      $target.find('li:has(ul)').removeClass('clicked').find("ul").slideUp()
      $target.siblings().removeClass('clicked').find("ul").slideUp();
   } else if ($.nodeName(event.target, 'li')) {
       // LI element, not the root li
       var val = $target.attr('value');
   }
});

这段代码假定单击的<li>元素没有任何其他后代(即:纯文本)。如果是这样的话，你也必须遍历树。

我建议使用data-attributes，而不是添加非标准的value属性，例如：

<li data-value='Geological'>Geological</li>

获取data-attribute的值：

$target.attr('data-value'); // Or:
$target.data('value');

Answer 2

应该使用.val()返回值，使用.html()返回html。