querySelectorAll並選擇特定的子代

Question

假設我有下面的HTML

的HTML

<div class="container">
  <p>Test1</p>
  <p>Test5</p>
</div>

<div class="container">
  <p>Test3</p>
  <p>Test7</p>
</div>

我想通過香草javascript（Test5和Test 7）在每個.container選擇第二個孩子。

我該怎么做？

如果我這樣做

var container = document.querySelectorAll(".container p");
console.log(container[1]);

它只返回Test5而不是兩個容器中的第二個孩子

有什么建議么？ 謝謝！

Answer 1

使用:nth-child選擇器：

 var secondChilds = document.querySelectorAll(".container p:nth-child(2)"); console.log(secondChilds); 

 <div class="container"> <p>Test1</p> <p>Test5</p> </div> <div class="container"> <p>Test3</p> <p>Test7</p> </div> 

Answer 2

使用ES6的另一種方法。 可能有點復雜-但效果很好。

 let elems = document.getElementsByClassName('container'); Array.from(elems).forEach(function(v){ v.children[1].style.color = 'blue'; }) 

 <div class="container"> <p>Test1</p> <p>Test5</p> </div> <div class="container"> <p>Test3</p> <p>Test7</p> </div>