我应该如何从js的多个范围中获取“这是我的名字”？

Question

 <div id='item1'>
    <span>This is my name</span>
    <span> This is my nickname</span>

需要JS代码来获取特定范围

Answer 1

您可以使用：

document.getElementById("item1").children[0];

要获取div的第一个孩子（即第一个跨度），然后在此节点上使用.textContent来获取“这是我的名字”

请参见下面的工作示例：

 const firstChild = document.getElementById("item1").children[0]; console.log(firstChild.textContent); 

 <div id='item1'> <span>This is my name</span> <span> This is my nickname</span> </div> 

或者，如果您想使用jQuery：

 const firstChild = $("#item1").children().eq(0); console.log($(firstChild).text()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='item1'> <span>This is my name</span> <span> This is my nickname</span> </div> 

Answer 2

1. 使用选择器:contains()选择包含文本的跨度This is my name

 $("span:contains(This is my name)").css('color', 'red') 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>This is my name</span> <span> This is my nickname</span> 

Answer 3

您可以将find与eq一起使用，如下所示。

 var item1 = $('#item1').find('span').eq(0).text(); var item2 = $('#item1').find('span').eq(1).text(); console.log(item1); console.log(item2); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='item1'> <span>This is my name</span> <span> This is my nickname</span> </div> 

Answer 4

使用jQuery，您可以使用

$('#item1 > span:first-child').text()

 var text = $('#item1 > span:first-child').text(); console.log(text); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='item1'> <span>This is my name</span> <span> This is my nickname</span> </div>