javascript - querySelectorAll 并选择特定的 child

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 中选择第二个 child 。

我该怎么做？

如果我这样做

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

它只返回 Test5 而不是两个容器中的第二个 child

有什么建议吗？谢谢!

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>