Skip to main content
 首页 » 编程设计

jquery之获取 li 的文本值(嵌套项中没有文本)

2026年03月25日1546kenshinobiy

<ul> 
  <li class="item-i">AI</li> 
  <li class="item-ii">AII 
    <ul class="level-2"> 
      <li class="item-a">A</li> 
      <li class="item-b">B</li> 
      <li class="item-c">C</li> 
    </ul> 
  </li> 
  <li class="item-iii">III</li> 
</ul> 

如何获取值AI AII A B C III?

到目前为止我尝试过的内容如下:

$(document).ready(function() { 
    $('li').each(function(index) { 
     alert($(this).text()); 
    }); 
}); 

但它没有给我所需的结果。当它到达“item-ii”时,它给出了所有结果。

我想要一件一件的元素。

请您参考如下方法:

$(function(){ 
  var text = $('li').map(function(){ 
    return $(this).contents().map(function(){ 
      return this.nodeType==3 ? this.nodeValue : ""; 
    }).get().join(''); 
  }).get().join(' '); 
  console.log(text); 
  // AI AII 
  // 
  //     A B C III 
}); 

contents()方法为您提供文本节点和子节点。文本节点的 nodeType 为 3。对于较少“功能”风格的代码,请尝试以下操作:

$(function(){ 
  $('li').each(function(){ 
    $(this).contents().each(function(){ 
      if (this.nodeType==3){ 
        console.log(this.nodeValue.replace(/^\s+|\s+$/g,'')); 
      } 
    }); 
  }); 
  // AI 
  // AII 
  //  
  // A 
  // B 
  // C 
  // III 
}); 

请注意,由于标记,仍然存在空白文本节点。