时间戳

首页 > 解决方案 > QuerySelectorAll 不适用于 nth-child

javascript - QuerySelectorAll 不适用于 nth-child

问题描述

我有以下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>

我正在尝试使用以下方法进行“测试 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>

标签： javascriptselectors-api

解决方案

它实际上是您要查找的索引 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>

推荐阅读