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

Question

<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"时,它给出了所有结果.

我想逐个项目.

Answer 1

$(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
});

请注意，由于标记的原因，仍然存在空白文本节点。