使用jQuery获取div.divClass下所有a标签仅返回第一个如何解决

问题复现背景 #

现有DOM结构如下：

<div class="divClass">
  <a class="aClass"></a>
  <a class="aClass"></a>
  <a class="aClass"></a>
</div>

原使用的选择器代码：

$("div[class='divClass'] > a")

执行后仅返回第一个a元素，需要获取所有符合要求的a元素。

解决方法 #

优先使用类选择器替代精确属性匹配写法，即可命中所有符合要求的a元素：

// 推荐写法：类选择器匹配所有class包含divClass的div下的直接子a
$("div.divClass > a")

如果必须使用属性选择器，改用包含匹配规则，避免div有额外类名、属性首尾空格导致匹配异常：

$("div[class*='divClass'] > a")

原写法异常的原因 #

div[class='divClass']是精确属性匹配规则，只有div的class属性值完全等于divClass（没有多余空格、没有其他附加类名）时才会命中。如果页面存在多个不完全匹配的divClass容器，只会命中第一个完全匹配的容器下的a元素，就会出现仅返回第一个a的情况。

你可以通过打印长度验证选择器是否匹配到了所有元素：

console.log($("div.divClass > a").length) // 正常场景下会输出3

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