Chrome中的$（this）.text（）vs $（this）.attr（“innerText”）

Question

我通常使用jQuery和javascript，因此这必须是初学者的问题。

这条线适合我，foo不是空的：

var foo = $("#hello").find("option").filter (function(){return $(this).text() == "BAR";});

这个位于同一地点并不是（foo undefined）：

var foo = $("#hello").find("option").filter (function(){return $(this).attr("innerText") == "BAR";});

唯一的区别是使用.text（）vs .attr（＆＃34; innerText＆＃34;）。为什么后者对我不起作用？

Answer 1

.attr()找到附加到DOM元素的HTML属性，它不会查找DOM元素的JavaScript属性，如innerHTML或innerText。要查找此类属性，您需要访问选择器返回的jQuery对象内的DOM元素，或者在本例中，访问this引用本身，例如：

var foo = $('#hello').find("option").filter (function(){return this.innerText == “BAR";});

正如其他人所指出的那样，不建议这样做，因为它可能导致意外行为，并且它也不是跨浏览器兼容的。只需使用.text()代替。

Answer 2

.attr()正在节点上查找属性innerText。它会给你undefined，除非你的节点看起来像那样：

<div innerText="test"></div>

也许您正在与.prop('innerText')混合使用，获取节点的属性innerText。这与.text()相同，只是因为jQuery计数器兼容性问题导致.text()更安全。

如果您对jQuery如何获取文本感兴趣，无论您使用的是哪种浏览器，请the relevant code