javascript - 如何使用jQuery获取列表的子元素的文本

Question

我正在尝试获取列表子元素的文本。但是我只能访问我不知道如何访问子元素的父元素。

HTML

<ul class="nav nav-list">
   <li class="active">
      <a href="javascript:void(0);">
      <i class="icon-dashboard"></i>
      <span class="menu-text"> Dashboard </span>
      </a>
   </li>
   <li>
      <a class="dropdown-toggle" href="javascript:void(0);">
      <i class="icon-text-width"></i>
      <span class="menu-text"> posts </span>
      <b class="arrow icon-angle-down"></b>
      </a>
      <ul class="submenu">
         <li>
            <a href="javascript:void(0);">
            <i class="icon-text-width"></i>
            Add New Post
            </a>
         </li>
         <li>
            <a href="javascript:void(0);">
            <i class="icon-text-width"></i>
            Blog
            </a>
         </li>
         <li>
            <a href="javascript:void(0);">
            <i class="icon-desktop"></i>
            News Letter
            </a>
         </li>
      </ul>
   </li>
</ul>

和 jQuery

$(document).on('click', '.nav-list > li', function(){
    $('.nav-list > li').removeClass('active');
    $(this).addClass('active');
    var text=$('.active >a >span').text();
    alert(text);
});

任何帮助，将不胜感激。

Answer 1

试试这个：

$(document).on('click', '.nav-list a', function () {
    $('.nav-list li').removeClass('active');
    $(this).closest('li').addClass('active');
    var text = $(this).text();
    alert(text);
});

演示在这里

Answer 2

尝试使用find()之类的，

$(document).on('click', '.nav-list > li', function(){
    $('.nav-list > li').removeClass('active');
    $(this).addClass('active');
    var text=$('.active a').find('span').text();// use find()
    // or try var text=$('.active > a span').text();
    alert(text);
});

如果你想得到submenu ul textthen 使用

if($(this).has('ul.submenu'))
{
    alert($.trim($(this).find('ul.submenu li').text()));
}

小提琴演示

Answer 3

$('.nav-list a').live('click', function () {
    $('.nav-list li').removeClass('active');
    $(this).closest('li').addClass('active');
    var text = $(this).text();
    alert(text);
});