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>元素没有任何其他后代（即：纯文本）。如果是这样，你也必须遍历树。

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

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

获取data-attribute的值：

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

Answer 2

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

如何从li元素获取id？

2 个答案: