querySelectorAll并选择特定的子项

Question

假设我有以下HTML

HTML

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

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

我想通过vanilla 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>