如何解决jQuery排序表格中插入行时获取位置失败的问题？

问题出在jQuery的map()方法返回的是jQuery对象而非原生数组，所以你调用sort()后得到的sorted依然是jQuery集合，没有index()方法（原生数组对应的方法是indexOf()）。按以下步骤修改代码即可：

1. 将jQuery集合转为原生数组
   在map()后添加.get()，把jQuery对象转换成普通数组：

   names = $("#ready_foods tr td:first-child").map(function () {
       return $(this).text();
   }).get(); // 新增get()方法
   

2. 使用原生数组的indexOf()方法获取索引
   把出错的那行改成：

   newNamePos = sorted.indexOf(newFood);
   

3. 修正插入位置的选择器
   原选择器针对的是td，应该直接定位到对应位置的<tr>元素，避免插入错误：

   if (newNamePos === 0) {
       // 插在表格最前面
       $('#ready_foods').prepend(newRow);
   } else {
       // 插在目标tr的前面
       $('#ready_foods tr').eq(newNamePos - 1).after(newRow);
   }
   

完整修改后的核心代码片段：

function makeNewRow(food) {
    max = max + 1;
    newFood = food.charAt(0).toUpperCase() + food.substr(1).toLowerCase();
    newRow = "<tr data-foodid=" + max + "><td>" + newFood + "</td></tr>";
    // 转成原生数组
    names = $("#ready_foods tr td:first-child").map(function () {
        return $(this).text();
    }).get(); 
    names.push(newFood);
    sorted = names.sort();
    newNamePos = sorted.indexOf(newFood); 
    // 正确插入行
    if (newNamePos === 0) {
        $('#ready_foods').prepend(newRow);
    } else {
        $('#ready_foods tr').eq(newNamePos - 1).after(newRow);
    }
    // ...其他代码
}

补充说明：

• jQuery对象是类数组对象，不支持所有原生数组方法，get()方法可以把它转换成真正的JavaScript数组。
• 如果需要更精准的不区分大小写字母排序，可以给sort()传比较函数：sorted = names.sort((a, b) => a.localeCompare(b));

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