如何在jQuery集合的指定索引位置添加元素？

看起来你已经熟练使用add()方法给jQuery集合追加元素了，但确实这个方法只能把新元素加到集合的末尾，没法指定插入位置。要实现在指定索引位置添加元素，我们可以换个思路——利用JavaScript数组的splice方法来操作，因为jQuery对象本质是类数组结构，很容易转成普通数组进行处理。

方法一：转数组后插入再转回jQuery对象 #

这是最直接的修改原集合的方式，代码示例如下：

var collection = myElement.children('.myClass');
var clones = collection.clone();

// 将jQuery集合转换为普通DOM元素数组
var clonesArray = clones.toArray();
// 使用splice在索引1的位置插入新元素（splice参数：索引、删除数量、插入元素）
clonesArray.splice(1, 0, $('<span>Whatever</span>')[0]);
// 将处理后的数组转回jQuery对象
clones = $(clonesArray);

someOtherElement.append(clones);

这里需要注意：我们插入的是DOM节点，所以要通过[0]从新创建的jQuery对象中取出对应的DOM元素，这样才能正确加入到数组里。

方法二：分批次插入到DOM（不修改原集合） #

如果你不需要修改原clones集合，只是想在插入DOM时控制位置，也可以分步骤追加：

var collection = myElement.children('.myClass');
var clones = collection.clone();

// 先追加集合中索引0的元素
someOtherElement.append(clones.eq(0));
// 插入新元素
someOtherElement.append($('<span>Whatever</span>'));
// 追加集合中剩下的元素（从索引1开始）
someOtherElement.append(clones.slice(1));

这种方式不需要修改原jQuery集合，直接通过DOM操作实现了指定位置插入的效果。

备注：内容来源于stack exchange，提问作者Eric