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

请注意，由于标记，仍有一个空白文本节点。

Answer 2

text（）函数选择列表项“item-ii”中的所有节点。由于您只需要选择文本节点，请改用：

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

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()

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>

获取li的文本值（嵌套项中没有文本）

4 个答案: