jquery - 获取 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
});

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