使用jQuery遍历元素多级子节点时children()不是函数报错如何解决？

问题原因 #

你通过$()选择器以及.children()方法拿到的都是jQuery封装的对象集合，但使用[i]下标从jQuery集合中取元素时，得到的是原生DOM对象，原生DOM没有jQuery提供的.children()方法，因此会抛出方法不存在的报错。

解决方案 #

可以选择以下任意一种方式修正：

方案1：将原生DOM转为jQuery对象后调用方法 #

var myElement = $('.a-container');
var myChildren = myElement.children();

for(var i = 0; i < myChildren.length; i++) {
     // 用$()包裹原生DOM，转成jQuery对象后再调用.children()
     var myGrandChildren = $(myChildren[i]).children();
     // 后续处理逻辑
}

方案2：使用jQuery的.eq()方法取集合元素 #

.eq(i)方法会返回jQuery集合中对应下标的元素，本身仍是jQuery封装对象，无需额外转换：

var myElement = $('.a-container');
var myChildren = myElement.children();

for(var i = 0; i < myChildren.length; i++) {
     var myGrandChildren = myChildren.eq(i).children();
     // 后续处理逻辑
}

方案3：直接使用jQuery的.each()方法遍历（更推荐） #

不用手动维护下标，语法更简洁：

var myGrandChildrenList = [];
$('.a-container').children().each(function() {
    // 这里的$(this)就是当前遍历到的直接子元素的jQuery对象
    var currentGrandChildren = $(this).children();
    myGrandChildrenList.push(currentGrandChildren);
    // 后续处理逻辑
});

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