如何用纯JavaScript定位所有fruitSort容器的:nth-child(3)元素

我来帮你搞定这个问题！你已经完成了给所有.fruitSort容器绑定点击事件的部分，现在只需要在事件处理函数里精准定位到当前点击容器内的第三个div元素就行。

问题分析 #

你之前的代码已经成功把点击事件绑定到了每个.fruitSort容器上，但核心问题是在showOrigin函数里没有基于触发事件的容器本身去查找子元素——如果尝试全局查找div:nth-child(3)，会匹配页面上所有符合条件的元素，而不是当前点击容器里的那一个。

解决方案 #

在事件处理函数中，this关键字会自动指向当前被点击的.fruitSort元素，我们可以利用它来获取目标子元素，下面提供两种纯JavaScript实现方式：

方式1：用querySelector（和CSS选择器逻辑一致，直观易懂）

直接通过this.querySelector('div:nth-child(3)')就能获取当前容器内的第三个div，和你写的CSS选择器完全匹配。

方式2：用children集合（性能更优，直接获取元素节点）

this.children会返回当前元素的所有子元素节点（仅包含HTML元素，不包含文本节点），由于索引从0开始，第三个元素的索引是2，所以可以用this.children[2]快速获取。

修改后的完整代码 #

JavaScript部分

var fruit = document.getElementsByClassName('fruitSort');
for(var i = 0; i < fruit.length; i++) {
  fruit[i].addEventListener("click", showOrigin, false);
}

function showOrigin() {
  console.log("clicked");
  // 方式1：使用querySelector获取第三个div（二选一即可）
  var targetElement = this.querySelector('div:nth-child(3)');
  // 方式2：使用children集合获取第三个div
  // var targetElement = this.children[2];
  
  // 示例操作：输出元素文本内容，若需要显示隐藏元素可修改display属性
  console.log(targetElement.textContent);
  // 如果默认隐藏了第三个div，点击后显示：
  // targetElement.style.display = 'block';
}

CSS部分（保留你的原有样式，可添加布局优化）

.fruitSort {padding:15px; border:1px solid grey; margin: 10px 0;}
.fruitSort div:nth-child(3) {color:tomato;}
/* 若需要默认隐藏第三个div，点击后显示，添加下面这行 */
/* .fruitSort div:nth-child(3) {color:tomato; display:none;} */

HTML部分（保持原结构不变）

<div class="fruits">
 <!-- NB! No ID's present, only classes so adding an id to .fruitOrigin is not an option -->
 <div class="fruitSort">
 <div>1</div>
 <div>Banana</div>
 <div>Latin America</div>
 </div>
 <div class="fruitSort">
 <div>2</div>
 <div>Apple</div>
 <div>The Netherlands</div>
 </div>
 <div class="fruitSort">
 <div>3</div>
 <div>Kiwi</div>
 <div>New Zealand</div>
 </div>
</div>

额外小提示 #

• 如果你的浏览器支持ES6，可以把循环里的var i改成let i，能避免潜在的闭包问题（不过在当前场景下，var也能正常工作）。
• 你可以根据实际需求修改targetElement的样式或属性，比如修改字体大小、背景色，或者控制元素的显示/隐藏。

内容的提问来源于stack exchange，提问作者BeesWax