Question

我想要2个变量中的文本，如：

var a = "Bar" ;   
var b = "by year" ;

HTML：

<h5 class="heading">Bar<span class="cT">by year</span></h5>

Answer 1

对于第一个变量，您可以使用以下方式获取文本节点：

var a = $('.heading').contents().filter(function() {
 return this.nodeType === Node.TEXT_NODE; 
}).text();

表示第二个元素：

var b = $('.ct').text();

Answer 2

您可以使用解构分配来获取.firstChild .textContent

的.heading和.childNodes属性

＆＃13;

let {0: {textContent: a}, 1: {firstChild: {textContent: b}}} = document.querySelector(".heading").childNodes;

console.log(`a:${a}, b:${b}`);

＆＃13;

<h5 class="heading">Bar<span class="cT">by year</span></h5>

＆＃13;

Answer 3

假设h5只有2个包含文本的节点。

您可以尝试以下方法（不需要jQuery只创建html元素）

var $content = $(`
<h5 class="heading">
  Bar
  <span class="cT">
    by year
  </span>
</h5>`);
var [a,b] = 
  []
  .map.call(
    $content[0].childNodes
    ,x=>x.textContent
  )
  .map(x=>x.trim())
  .filter(x=>x!=="")
;
alert("a is:"+a);
alert("b is:"+b);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

这是解决此问题的另一种选择：

let a = jQuery(".heading").clone().find('span').remove().end().text();

let b = jQuery(".heading > span").text()

关于a执行克隆，然后从克隆中删除范围并捕获操纵克隆的文本。

关于b，我们会提取span的直接.heading子项的文字。

在jQuery中包含span标记之前获取元素的文本

4 个答案: