在简单的jQuery循环中无法获取未定义或空引用的属性“ nodeValue”

Question

我正在将li值插入表单上的ul元素中。

就像测试一样，我正在ul中输入2个值。现在，一旦用户单击提交，我将检查这些li值是否在另一个列表中重复...如果不是，则提交值。但是，我正在研究一个场景，如果用户在ul中输入了一些重复项和非重复项，那么我希望一次将非重复项从ul元素中删除它们已提交，但将重复项保留在列表中，以便用户可以看到重复项。

这是我的代码：

console.log("Serial Length - " + $("#SerialUL li").length);
var serialUlLength = $("#SerialUL li").length;

// remove serial numbers that have been submitted from the list on the form.

for(i = 0; i < serialUlLength; i++){
    var serialNumber = $("#SerialUL li:eq(" + i + ")").contents().get(0).nodeValue;
    var isInSubmitArray = $.inArray(serialNumber, submitArray);

    if(isInSubmitArray > -1){
        console.log(serialNumber);
        $("#SerialUL li:eq(" + i + ")").remove();
    }
}

如上所述，到目前为止，我仅在li中输入2个ul值即可进行简单测试。我要比较的列表中有0个值..因此，此时不应有任何重复项。我遇到的问题发生在第二个li元素上。我收到此控制台错误：

  

无法获取未定义或空引用的属性“ nodeValue”

我已经在控制台中进行了调试，但是我想我盯着它看了太长时间。有人可以协助解释为什么我会收到此错误吗？

感谢您的帮助。

更新

我作为li输入的值是10和11。这是我在上面的问题中基于上面的代码在控制台中看到的内容：

更新2

显示li附加到ul元素的代码

// Append TextBox Value to '<ul>' element for user to see once they click button


$("#SerialUL").append("<li class='bullet-serial'>" + serialTxtBoxValue + "<button type='button' class='remove-button'>x</button></li>");

Answer 1

如何更简单，更容易调试-假设前导序列号，后面没有数字

var submitArray=[123,567];
$("#SerialUL li").each(function(_,li) {
  var ser = parseInt(li.textContent.trim()); // add .replace(/[^0-9]/g,"") if needed
  console.log(ser)
  if (submitArray.indexOf(ser) !== -1) {
    console.log("removing",ser)
    li.remove();
  }  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="SerialUL">
  <li>123 <button>X</button></li>
  <li>456 <button>X</button></li>
  <li>123 <button>X</button></li>
  <li>567 <button>X</button></li>
  <li>789 <button>X</button></li>
</ul>

更复杂的版本，带有一些有用的附加功能，例如委托

var submitArray = [];

$("#serialTxtBox").on("input", function(e) {
  var val = this.value;
  $("#err").toggle(val && submitArray.indexOf(val)!==-1);
  if (String(val).length == 3 && submitArray.indexOf(val)==-1) {
    submitArray.push(val);
    $("#SerialUL").append("<li class='bullet-serial'>" + val + "<button type='button' class='remove-button'>x</button></li>");
    $(this).val("");
  }
  if ($("#err").is(":visible")) $(this).val("");
})

$("#SerialUL").on("click",".remove-button", function(e) { // delegation
  e.preventDefault();
  $(this).closest("li").remove();
  submitArray = [];
  $("#SerialUL li").each(function(_, li) {
    var ser = parseInt(li.textContent.trim()); // add .replace(/[^0-9]/g,"") if needed
    submitArray.push(ser);
  });
})

#err { color:red; display:none  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="serialTxtBox" /><span id="err">Already there</span>
<ul id="SerialUL">
</ul>

Answer 2

您要返回的元素节点为.contenets().get(0).，“ nodeValue”始终在元素节点上返回null。

仅在contents()函数上尝试过滤文本节点：

var serialNumber = $("#SerialUL li:eq(" + i + ")").contents().filter(function() {
  return this.nodeType === 3;
}).get(0).nodeValue;

或使用。textContent代替.nodeValue：

var serialNumber = $("#SerialUL li:eq(" + i + ")").contents().get(0).textContent;