未捕获的类型错误：无法读取未定义的属性（读取“indexOf”）答案

【问题标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')未捕获的类型错误：无法读取未定义的属性（读取“indexOf”）
【发布时间】：2022-01-01 09:21:04
【问题描述】：

我正在选择 area_enInfantry 的所有子 div 并循环调整某些子 div 的文本。 cardArray 是一个全局常量，myId 在父函数中定义。

未捕获的类型错误：无法读取未定义的属性（正在读取“getAttribute”）

var field = $("#area_en" + cardArray[myId]['type']).find("div");

field.each(function(a, element) {
  console.log("cC type:" + cardArray[myId]['type'] + "- index:" + a + " title: " + element[a].attr('title'));

  if (element[a].attr("title").indexOf("player") < 0) { // check this card isn't special player card
    doStuff;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="area_enInfantry">
  <div id="info_enInfantryScore" class="info_Score">-1</div>
  <div class="encardContainer" title="barricade">-1</div>
  <div class="encardContainer" title="spy">2</div>
</div>

我读到on this post 可能是因为字段/元素的内容可能是 DOM 元素，我应该将它们包装在 $() 中，所以我确实这样做了 - 将两个变量都更改为 $(element)[a] .attr('标题') 但现在我得到了 Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf') ，似乎将错误移至下一行。

我在这里做错了什么？

【问题讨论】：

问题看起来你的 .each 中的第一个元素是 info_enInfantryScore

标签： javascript jquery each attr

【解决方案1】：

这里有几个问题。首先变量element包含一个Element对象，而不是jQuery对象，所以没有attr()方法可用。

其次，一旦您更正了这一点，第一个 div 上的 attr('title') 就不会被设置，undefined 也是如此。因此你会得到一个错误，因为你在一个空值上调用indexOf()。如果为 null，您可以通过将值合并为空字符串来解决此问题。

另外请注意，我假设您要调用 doStuff() 函数，因此需要在末尾添加 ()，最好尽可能使用 prop() 而不是 attr()。

话虽如此，试试这个：

// mock data
let myId = 'foo';
let cardArray = { foo: { type: 'Infantry' } }

let doStuff = () => console.log('do stuff...');
var $field = $("#area_en" + cardArray[myId]['type']).find("div");

$field.each(function(i, element) {
  let $el = $(element);
  console.log("cC type:" + cardArray[myId]['type'] + "- index:" + i + " title: " + $el.prop('title'));
  if (($el.prop("title") || '').indexOf("player") < 0) { // check this card isn't special player card
    doStuff();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="area_enInfantry">
  <div id="info_enInfantryScore" class="info_Score">-1</div>
  <div class="encardContainer" title="barricade">-1</div>
  <div class="encardContainer" title="spy">2</div>
</div>

【讨论】：