jQuery循环报错：无法获取undefined/null的nodeValue属性

嘿，我来帮你拆解这个报错的问题～

首先，直接报错原因是循环遍历DOM元素时的索引错位问题：
你用了正向循环（i从0到serialUlLength-1）来遍历<ul>里的<li>，但在循环中执行了remove()操作。当你删除一个<li>后，剩下的<li>会自动往前移动填补空缺，索引会发生变化。比如初始有2个<li>（索引0和1），当i=0时删除了索引0的元素，原来索引1的<li>现在变成了索引0，但你的循环还是会继续走到i=1，这时候去查找$("#SerialUL li:eq(1)")就找不到元素了，contents().get(0)自然返回null，访问它的nodeValue就会抛出你看到的错误。

另外，结合你说的「submitArray为空，理论上不应删除元素」却出现报错的情况，我发现你的逻辑判断和需求写反了：
你的需求是「若不重复则提交并移除，重复则保留」，也就是当serialNumber不在submitArray里时才删除，但代码里写的是if(isInSubmitArray > -1)（即存在于数组中才删除）。如果实际运行时你把条件写反了（比如应该是isInSubmitArray === -1），那当submitArray为空时，所有元素都会触发删除，进而引发索引错位的报错。

解决方案 #

这里给你两种靠谱的修改方式，既能解决索引问题，又能对齐需求逻辑：

方式1：倒序循环遍历

从最后一个<li>往前遍历，这样删除前面的元素不会影响已经遍历过的元素索引：

console.log("Serial Length - " + $("#SerialUL li").length);
var serialUlLength = $("#SerialUL li").length;
// 倒序循环，避免删除元素后索引混乱
for(i = serialUlLength - 1; i >= 0; i--){
    var $li = $("#SerialUL li:eq(" + i + ")");
    var serialNumber = $li.contents().get(0).nodeValue;
    var isInSubmitArray = $.inArray(serialNumber, submitArray);
    // 修正条件：不在submitArray中时，提交并移除
    if(isInSubmitArray === -1){
        console.log(serialNumber);
        $li.remove();
        // 在这里添加提交serialNumber的逻辑
    }
}

方式2：先缓存所有<li>集合再遍历

提前把所有<li>元素存入jQuery集合，遍历这个静态集合，DOM的变化不会影响遍历过程：

// 先获取所有li元素的静态集合
var $lis = $("#SerialUL li");
console.log("Serial Length - " + $lis.length);

$lis.each(function(){
    var $li = $(this);
    var serialNumber = $li.contents().get(0).nodeValue;
    var isInSubmitArray = $.inArray(serialNumber, submitArray);
    if(isInSubmitArray === -1){
        console.log(serialNumber);
        $li.remove();
        // 提交serialNumber的逻辑
    }
});

这两种方式都能解决索引错位的问题，同时修正条件判断后，就能完全符合你的业务需求啦～

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