如何无需each遍历获取每个row类下首个test类的内容？

刚好碰到过类似的场景！你需要精准选中每个.row容器里第一个出现的.test元素，又不想用each遍历，那可以靠CSS选择器的组合一次性定位目标元素，再转成数组就行。

核心思路 #

因为.test在每个.row里的位置不固定，:first-child或者:first-of-type这类依赖位置的选择器没用，但我们可以用兄弟选择器排除法——选中所有.row下的.test，但排除掉那些前面已经有同层级.test的元素，剩下的自然就是每个.row里的第一个.test。

实现代码 #

// 一次性选中所有目标元素，转成数组后提取文本（trim去掉换行空格）
const targetTexts = Array.from(
  document.querySelectorAll('.row .test:not(.row .test ~ .test)')
).map(el => el.textContent.trim());

console.log(targetTexts); // 输出 ["bbbb","ffff","jjjj"]

选择器解释 #

• .row .test：先选中所有嵌套在.row里的.test元素
• :not(.row .test ~ .test)：用:not()排除掉那些前面有同级别.test的元素（~是通用兄弟选择器，会匹配前面有指定元素的所有同级后续元素），这样就只保留了每个.row里的第一个.test

这个方法不用遍历每个.row，靠选择器直接定位所有目标，完全符合你的需求～

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