Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')

Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')

我正在选择 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 可能是因为 field/element 的内容可能是 DOM 元素,我应该将它们包装在 $() 中,所以我确实这样做了 - 改变$(element)[a].attr('title') 的两个变量 但现在我得到 Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf') 相反,似乎将错误移到了下一行。

我做错了什么?

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

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

另请注意,我假设您要调用 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>