我應該如何從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>