如何仅获取<li>标签内的文本，而不获取<li>标签内其他元素的文本

Question

我有一个含有 li 的 ul 列表，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>

我明白输出内容，但

标签内的文本也一起出现了，如何避免这种情况？

- Mehul Chachada

---

在这里使用nodeType==3的一个（不太好的）替代方案：https://stackoverflow.com/questions/7063408/how-to-get-text-only-from-the-div-when-it-has-child-elements-with-text-using-jqu - freedomn-m

可能是获取元素的文本节点的重复问题。 - freedomn-m

Answer 1

从 li 中过滤出 文本节点 - 请参见下面的演示：

$("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>

- kukkuz

Answer 2

你可以使用TextNode对象。

普通JavaScript属性：

• .firstChild
• .nodeValue

如果你混用普通JavaScript和jQuery，请记得使用以下方式解除jQuery对象的引用，以便在普通JavaScript上使用：

方括号表示法： $(Object)[0] 或者 .get()方法：

$(Object).get(0)

详细信息在演示中有注释

演示

$("ul li").on('click', function() {
  /* Dereference $(this) by adding [0]
  || $(this)[0] = this
  || Now plain JavaScript methods and properties...
  ||...can be used.
  */
  /*
  || this.firstChild
  || .firstChild property will return the first node
  || A node can be an element, a comment, text, or...
  ||...even whitespace.
  || see: https://developer.mozilla.org/en-US/docs/Web/API/Node
  || The firstChild of any <li> is "Text1", "Text2", 
  || or "Text3"
  */
  /*
  || this.firstChild.nodeValue
  || .nodeValue will return a node as a string
  */
  $("span").text($(this)[0].firstChild.nodeValue);
});

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>

- zer00ne

Answer 3

使用 $(this).clone().children().remove().end().text() 来获取外部元素的文本。

$("ul li").on('click', function() {
  $("span").text($(this).clone().children().remove().end().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>

- Pooja Chauhan

Answer 4

我偏好的解决方案是在内存中创建元素的克隆，并在读取其内容之前删除其子元素。

对于你的情况：

$( "ul li" ).on( 'click' , function() {

   $( "span" ).text( $(this).clone().children().remove().end().text() );

});

我推荐这个解决方案，因为它只需要一行代码。

- István Pálinkás

---

嗨，@Steven，如何更改那个的文本？ - jafar pinjar

@jafarpinjar 要更改什么文本的内容？ :) - István Pálinkás

这行代码获取了li元素的文本，但在获取文本后，我需要替换为其他文本。 - jafar pinjar