如何用jQuery获取父元素下指定类的子元素数量？

云原生阿岚

2026-5-7

解决jQuery获取.child-two元素数量的问题

我来帮你排查问题并解决这个需求~ 先直接给你可行的正确代码，再分析你之前尝试失败的原因：

一、可行的解决方法

你要获取.main下.child-two的数量，下面两种写法都是有效的：

方法1：使用后代选择器直接获取

// 确保代码在DOM加载完成后执行
$(document).ready(function() {
  const childTwoCount = $('.main .child-two').length;
  console.log(childTwoCount); // 会输出2，对应你DOM里的两个.child-two元素
});

方法2：使用`find()`方法（修正你之前的选择器错误）

$(document).ready(function() {
  const childTwoCount = $('.main').find('.child-two').length;
  console.log(childTwoCount); // 同样输出2
});

二、你之前尝试失败的原因分析

第一种方法返回undefined
这个写法本身是正确的，出现undefined大概率是两个原因：
- jQuery没有被正确引入：检查你的页面是否已经加载了jQuery库，如果没有，需要在执行这段代码前引入jQuery（比如将jQuery的脚本标签放在你的自定义脚本之前）。
- 代码执行时机过早：如果你的代码在DOM还没完全解析完成时就运行了，此时.main .child-two元素还不存在，就可能出现异常。用$(document).ready()包裹代码可以确保DOM加载完成后再执行。
第二种方法抛出find is not a function错误
你写的选择器是.child（少了-two），不过核心报错原因是$并不是jQuery的实例：
- 可能你的页面引入了其他和jQuery冲突的库（比如Prototype），这些库会占用$这个变量名。此时可以改用jQuery代替$：
```
const childTwoCount = jQuery('.main').find('.child-two').length;
```
- 或者通过noConflict()重新定义jQuery的别名：
```
const $j = jQuery.noConflict();
const childTwoCount = $j('.main').find('.child-two').length;
```