在单个命令中工作但不在迭代中的命令
问题描述:
我尝试从特定document.querySelectorAll()的迭代中获取列表。我用这个迭代:在单个命令中工作但不在迭代中的命令
for (i = 0; i < document.querySelector('li[dat*="era"]').length; ++i) { document.querySelectorAll('li[dat*="era"] ul li.title div')[i].textContent }
它给我回个错误:
Uncaught TypeError: Cannot read property 'textContent' of undefined at <anonymous>:2:64
它只能当我使用一个单值
document.querySelectorAll('li[dat*="era"] ul li.title div')[0].textContent
怎么可能作为一个工作单一的命令,但不是一个迭代?
例HTML:
<li id="r01" dat="era">
<ul class="ref">
<li class="sth"> </li>
<li class="title">
<div>
Text 1 for retrieve
</div>
</li>
<ul>
</li>
<li id="r02" dat="era">
<ul class="ref">
<li class="sth"> </li>
<li class="title">
<div>
Text 2 for retrieve
</div>
</li>
<ul>
</li>
答
尝试
下面的代码片断
// Your code, doesnt throw error what you have specified.
// But when document.querySelector returns null(when theres no specified tag, it throws
for (i = 0; i < document.querySelector('li[dat*="era"]').length; ++i) { document.querySelectorAll('li[dat*="era"] ul li.title div')[i].textContent }
// Use document.querySelectorAll(...) once for performance
var l = document.querySelectorAll('li[dat*="era"] ul li.title div')
for (i = 0; i < l.length; ++i) {
console.log(l[i].textContent)
}
<li id="r01" dat="era">
<ul class="ref">
<li class="sth"> sth 1 </li>
<li class="title">
<div>
Text 1 for retrieve
</div>
</li>
</ul>
</li>
<li id="r02" dat="era">
<ul class="ref">
<li class="sth">sth 2</li>
<li class="title">
<div>
Text 2 for retrieve
</div>
</li>
</ul>
</li>
+0
非常感谢。第二种解决方案适用于我。 – Astetr
为什么是长度和内容的不同选择? –
@NinaScholz它给出了相同的结果。即使我将长度选择符更改为30,但错误仍然相同 – Astetr
可以发布HTML吗? –