QuerySelectorAll 不适用于 nth-child

Question

我有以下 html:

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

我正在尝试使用此方法到达 'Test 2'：

var secondChilds = document.querySelectorAll(".container div:nth-child(2)");
console.log(secondChilds[0]);

然而，这让我明白了：

 <div>Test1.2</div>

知道我做错了什么吗？非常感谢。

var secondChilds = document.querySelectorAll(".container div:nth-child(2)");
console.log(secondChilds[0]);

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

Answer 1

它实际上是您要查找的索引 1。 .container div:nth-child(1)

const secondChilds = document.querySelectorAll(".container div:nth-child(1)");

console.log(secondChilds[0]);

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

Answer 2

querySelectorAll() 返回 3 divs。 Test1.2 是 Test1 div 的第二个 child。 Test2 是 .container div 的第二个 child。 Test2.2 是 Test2 div 的第二个 child。

因为它 returns 它们按照它们在 DOM 中出现的顺序排列，所以您想要的是 secondChilds[1]，而不是 secondChilds[0]。

如果只想考虑.container的直接children，而不考虑嵌套children，使用>.

var secondChilds = document.querySelectorAll(".container > div:nth-child(2)");
console.log(secondChilds[0].innerText);

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

Answer 3

目前您的查询“.container div:nth-child(2)”selects 任何类型的 div（包括嵌套的）和 returns 您第二个 div（即测试 1.2）。你想要的只是.containerdiv的直系子代，所以你可以使用>到select父系的直系子代。

所以您的查询应该是 .container > div:nth-child(2)

var secondChilds = document.querySelectorAll(".container > div:nth-child(2)");
console.log(secondChilds[0]);

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

QuerySelectorAll 不适用于 nth-child

QuerySelectorAll not working with nth-child

javascript

selectors-api