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

Question

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

未捕获的TypeError:无法读取未定义的属性（读取“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>

我在这篇文章中读到，这可能是因为字段/元素的内容可能是DOM元素，我应该用$（）包装它们，所以我确实这样做了——将两个变量都更改为$（元素）[a]. attr（“标题”），但现在我被发现了TypeError：无法读取未定义的属性（读取'indexOf'），似乎将错误移动到下一行。

我到底做错了什么？

Answer 1

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

其次，一旦你纠正了这一点，第一个div上的attr（'title'）没有设置，所以未定义。因此，您会得到一个错误，因为您在一个空值上调用indexOf（）。如果为null，您可以通过将值合并到空字符串来解决这个问题。

还要注意的是，我假设您希望调用doStuff（）函数，因此需要在末尾添加（），最好在attr（）上使用prop（）。

话虽如此，请尝试以下方法：

// 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>