javascript - 如何只获取 <li> 文本而不从 li 中的其他元素获取文本

Question

我有一个 ul 列表，里面有 li，里面有 li 文本和 div . 相同的类被分配给li，而div被分配了不同的类名。

我只想从 li 而不是从 div 获取文本。 这是片段:

$("ul li").on('click', function() {
  $("span").text($(this).text());
});

ul {
  position: relative
}
div {
  position: absolute;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='same'>Text1
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text2
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text3
    <div class='notsame'>Other text</div>
  </li>
  </ul>
  <span> </span>

我得到了 O/P，但 div 中的文本也出现了如何避免这种情况？

Answer 1

从 li 中过滤掉 text 节点 - 请参见下面的演示:

$("ul li").on('click', function() {
  $("span").text($(this).contents().filter(function(){
      return this.nodeType == 3; // select text nodes
  }).text()); // paste all of them to the span
});

ul {
  position: relative
}

div {
  position: absolute;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='same'>Text1
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text2
    <div class='notsame'>Other text</div> and more
  </li>
  <li class='same'>Text3
    <div class='notsame'>Other text</div>
  </li>
  </ul>
    <span> </span>