获取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”时，它会给出所有结果。

我想逐个获取每个项目。

- Tahir

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

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

- Phrogz

Answer 2

text()函数选择列表项“item-ii”中的所有节点。由于您需要仅选择文本节点，因此请改用以下内容：

$(document).ready(function(){
            $('li').each(function(index) {
     alert($(this).contents().filter(function(){ return this.nodeType==3}).text());
    });
        });

- johngreen

---

我们能否使用同一行代码来更新文本？ - o12d10

Answer 3

$(function() {
  var content = $.map($('ul li').contents(), function(elem, i) {
    if( elem.nodeType === 3 && $.trim(elem.nodeValue).length )
        return $.trim(elem.nodeValue);
  });

  alert(content);
});

参考：$.map(), $.trim(), .contents()

- jAndy

Answer 4

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

- coolguy

---

尝试这段代码，我会依次收到警报 AI AII A B C III！ - coolguy

除了您的格式问题，这是非法的HTML。原始问题的HTML在语法上是有效的；而您的不是。 - Phrogz