从三个具有相同类名的 div 元素中选择一个答案

【问题标题】：Select one out of of three div elements with the same class name从三个具有相同类名的 div 元素中选择一个
【发布时间】：2018-07-21 17:03:09
【问题描述】：

基本上我有三个具有相同类名（框）的小 div 部分，我想选择第二个，以便我可以选择另一个 p-Tag 等。

到目前为止，这是我尝试过的：

var select = document.querySelectorAll('.clearfix box box');

当然，这样写是错误的，我也没有别的想法。

HTML：

<div class="box">
  <p>Nulla consequat massa quis enim. Donec pede justo,fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
    ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="box">
  <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
    ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="box">
  <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
    ut, imperdiet a, venenatis vitae, justo.</p>
</div>

【问题讨论】：

能否将 html 添加到问题中
How to get the second match with QuerySelector?的可能重复
感谢大家的回答，但是现在我应该用其他文本替换 p-Tag 的值，我该怎么做？！

标签： javascript html

【解决方案1】：

您需要使用类选择器选择元素，然后从被选择的元素中获取第二个：

document.querySelectorAll('.clearfix .box')[1];

这里，document.querySelectorAll 将返回 divs 类 box 然后[1] 将获得第二个。

【讨论】：

感谢您的回答，我在那里添加了我的 HTML 看看，基本上 .clearfix 是这两个 div 的父级，所以这就是我在那里尝试的。顺便说一句，我不明白你的意思，我应该把类当作你的意思吗？！

【解决方案2】：

你的html是这样设置的，你可以使用选择器

.clearfix .box:nth-child(2)

这将获得clearfix 中的第二个div，其类包含box

let select = document.querySelector('.clearfix .box:nth-child(2)')
let p = document.createElement('p')
p.textContent = 'New p element'
select.appendChild(p)

<div class="clearfix">
  <div class="box"><p>I am div 1</p></div>
  <div class="box"><p>I am div 2</p></div>
</div>

【讨论】：

【解决方案3】：

如果你尝试这个会怎样：

var select = document.getElementsByClassName("box")[1]

getElementsByClassName 选择文档中所有名为 box 的类

[1]选择第二个对象（第一个对象的索引为0）

【讨论】：