Question

我有这个DOM树：

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

如何循环遍历li本身和script元素之间的上述li元素的子元素，即脚本和span元素不在循环中... 谢谢你的推荐！

注意：我不想使用JQuery，因为我的应用程序正在使用Protoype，如果我同时使用它们，它将与JQuery冲突，如果有使用Prototype的快速解决方案，我会很感激。

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了解更多节点类型

Answer 2

您可以使用jQuery选择器：

让所有<li>的孩子：

$('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();
});

Answer 3

这是我为你攻击的解决方案：

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

first span in Li

Answer 4

你怎么看看jquery？它有一个非常有趣的查询语法。我确定你想要循环的元素是什么元素，但是对于intance： $（'li＆gt; img'）将返回所有列表项下的所有图片。查看规范以获取更多jquery

如何循环一些特定的子节点

4 个答案: