jquery 集合转list集合

前端开发中常用的jQuery库，是一款非常灵活的JavaScript库。今天我们来聊聊jQuery集合和list集合之间相互转换的方法。

jQuery集合通常是一个包含一组DOM元素的对象。比如通过类名获取到的图片组或者某个ul下面的所有li组成的集合。

// 比如这样获取到一个图片组的jQuery集合
var imgList = $('.img-container img');

而list集合就是一个数组对象，它是JavaScript内置的对象。我们可以把jQuery集合转换成list集合，然后根据需要处理里面的元素。

// 使用jQuery对象的toArray()方法将jQuery集合转换为list集合
var imgArr = imgList.toArray();

到这里为止，我们获得了一个包含所有图片元素的数组imgArr。接下来，我们就可以随心所欲地操作它。

// 比如把所有图片的宽度都变为300
imgArr.forEach(function(img){ 
$(img).width(300); 
});

需要注意的是，jQuery集合是一个类数组对象，可以像数组一样进行循环遍历等操作，但并不是真正的数组。所以一些针对数组特有函数的操作，如filter、map等需要先将其转换为list集合。

// 比如利用map方法生成一个imgList的src数组
var imgSrcList = imgList.map(function(){
return $(this).attr('src'); 
}).toArray();

jQuery对于DOM树操作非常方便，但在一些数组批量处理的场景下，转换成list集合也是一个不错的方法。

查看更多关于jquery 集合转list集合的详细内容...