0

我有清单：

<ul class='mates'>
   <li class='m' id='1'>Jakub</li>
   <li class='f' id='2'>Vinnie</li>
   <li class='m' id='3'>David</li>
</ul>

如果“li”标签的内容（在“li”标签之间）等于“xyz”，我如何选择“一个接一个”进行检查。

element = document.getElementsByClassName('.mates').firstChield.innerHTML;
do {
    if(){
        //do something
    }
}while (element = element.nextSibling);

但我还远远不够选择firstChild。此错误显示在控制台中：“无法读取未定义的属性 'innerHTML'”。这需要在纯 JavaScript 中完成。有任何想法吗？

4

4 回答 4

3 
<ul class='mates'>
   <li class='m' id='1'>Jakub</li>
   <li class='f' id='2'>Vinnie</li>
   <li class='m' id='3'>David</li>
</ul>
<script>
var mates = document.getElementsByClassName('mates')[0];
for (var i=0; i< mates.childNodes.length; i++){
    if(mates.children[i].innerHTML == 'Vinnie') alert("Got you! ID "+mates.children[i].id)
}
</script>
于 2013-05-23T14:46:21.220 回答
2

删除参数中的点。像这样：

element = document.getElementsByClassName('mates').firstChild.innerHTML;

点不是类名的一部分。

编辑还注意到该问题最初在firstChild.

于 2013-05-23T14:30:26.817 回答
2

您的element变量不是一个元素（它的值可能是undefined）。如果你像这样使用它应该可以工作：

var element = document.getElementsByClassName('mates')[0].firstChild;
do {
    if(element.innerHTML == 'foo'){
        //do something
    }
} while (element = element.nextSibling);

上面的代码修复了：

  • @Renan 指出的类名
  • 中的错字.firstChild

另请注意，它getElementsByClassName返回一个元素列表，因此您必须抓住列表中的第一个（索引0）才能到达您的<ul>.

最后，请记住，您将遍历 的所有子节点，包括空文本节点（请参阅http://jsfiddle.net/58ZZF/<ul>上的演示）。如果使用and可以避免这种情况，但我不确定这些属性是否存在跨浏览器问题（MDN 只说它是 Firefox 3.5+）。firstElementChildnextElementSibling

于 2013-05-23T14:31:11.757 回答
1

很少的错误

  1. getElementsByClassName不应该有的类名.
  2. 中的拼写错误firstChild
  3. getElementsByClassName返回一个数组，而不是 dom 引用
  4. 使用nextSibling它时也可以返回文本节点，您需要检查nodeType以确保元素是元素节点（nodeTye = 1），您也可以检查tagName == 'LI'

尝试

var element = document.getElementsByClassName('mates')[0].firstChild;
do {
    if(element.nodeType == 1){
        console.log(element.textContent)
    }
}while (element = element.nextSibling);

演示：小提琴

于 2013-05-23T14:31:31.020 回答