如何循环遍历特定的子节点

Question

我有这样的DOM树：

<li> 
data ....
  <br>
  data ...
  <img ... />
  <br>
  <script> ... </script>
  <span> data ... </span>
</li>

我如何循环遍历以上li元素的子元素，这些子元素在li本身和script元素之间，即脚本和span元素不在循环范围内... 谢谢！！

注：我不想使用JQuery，因为我的应用程序正在使用Prototype，如果我同时使用两者会冲突，如果有一个使用Prototype的快速解决方案，我将不胜感激。

- JaHelia

Answer 1

这个对你有用吗？

var child = liElement.firstChild;
while(child){
    if(child.nodeName.toLowerCase() == 'script'){
        break
    }
    //do your stuff here
    child = child.nextSibling;
}

请注意，如果您示例中的“数据”是字符串，则这些字符串将作为textNodes实例存在于子层次结构中。如果您需要对此进行特殊处理，则需要进行检查，例如：

switch(child.nodeType){
case 3:
   //text Node
   break;
case 1:
   //Element node
   break;
default:
    //break;
}

请查看https://developer.mozilla.org/en/nodeType以了解更多节点类型。

- jordancpaul

Answer 2

你可以使用jQuery选择器：

获取所有

的子元素：

$('li').children();

排除不需要的元素：

$('li').children().not('script').not('span');

然后循环遍历所选内容：

$('li').children().not('script').not('span').each(function(index, element){
    //do sth like hide the element
    $(element).hide();
});

- Munneson

---

顺便提一下：jQuery 可以与其他使用 '$' 符号的库很好地协作。这里有一个无冲突模式：http://api.jquery.com/jQuery.noConflict/ - Munneson

我已经使用了这个方法（noConflict），但它并不是问题所在，网站在许多页面崩溃，没有具体的原因，如果我删除Jquery库就不会崩溃。 - JaHelia

只需下载一个选择器库，即可轻松获得jQuery选择器的功能，而无需其他任何东西。 - Umair Jabbar

嗨Umair，我在哪里可以下载仅包含选择器库而不是整个JQuery的内容？ - JaHelia

Answer 3

这是我为您破解的解决方案：

here's a solution i hacked for you :

    $( "li" ).each(function( index ) {
 console.log($(this).find("span:first").text());
});

Li 中的第一个 span

- Genjuro

Answer 4

你看过jQuery吗？它有一个非常好的查询语法。我不确定你想循环遍历哪些元素，但是例如：$('li > img')将返回所有列表项下的所有图像。查看规范以获取更多jquery信息。

- Menahem

---

我不能使用 JQuery，因为我在我的应用程序中正在使用 Prototype，如果我使用 JQuery，它会与之冲突。 - JaHelia

好的，看到你的编辑了。对于那个给出负评的人，我在 JeHelia 提到他不能使用 JQuery 之前就已经回答了。 - Menahem