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

Question

我有一个ul列表，里面有li，里面有li文本和div。same类分配给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中过滤掉文本节点- 请参阅下面的演示：

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

Answer 2

使用 $(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>

Answer 3

您可以使用TextNode 对象。

普通的JavaScript属性：

• .第一个孩子
• .nodeValue

如果你确实将纯 JavaScript 与 jQuery 混合使用，请记住使用以下方法取消引用您打算在其上使用纯 JavaScript的 jQuery 对象：

括号表示法：

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

Answer 4

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

在您的情况下：

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

我推荐这个解决方案，因为它是单行的。