在jQuery中获取第一个跨度的第一个文本[重复]答案

【问题标题】：Get first text of first span in jQuery [duplicate]在jQuery中获取第一个跨度的第一个文本[重复]
【发布时间】：2020-03-09 06:49:26
【问题描述】：

如何在 jQuery 中获取第一个跨度的第一个文本。

预期结果：abc 但它给了我abc abc2。我该怎么做？

console.log($("#x1:first").text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="x1">abc<span>abc2</span></span>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用filter() 仅返回文本节点：

var text = $('#x1').contents().filter(function() {
  return this.nodeType == 3; // text node
}).text();

console.log(text);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="x1">abc<span>abc2</span></span>

【讨论】：

【解决方案2】：

你可以得到文字

在firstChild 和nodeValue 中使用Javascript：

const text = document.getElementById("x1").firstChild.nodeValue;
console.log( text );

&lt;span id="x1"&gt;abc&lt;span&gt;abc2&lt;/span&gt;&lt;/span&gt;

将 jQuery 与 contents 和 get() 一起使用：

const text = $("#x1").contents().get(0).nodeValue;
console.log( text );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="x1">abc<span>abc2</span></span>

【讨论】：

【解决方案3】：

console.log($("#x1:first").clone().children().remove().end().text());


// .children() ->  select all the child elements
// .remove()   ->  remove all the child elements
// .end()      ->  again go back to parent element

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="x1">abc<span>abc2</span></span>

注意：.clone()在这里很重要，否则实际元素会被修改。

【讨论】：