javascript - how to loop through some specific child nodes

I have this DOM tree:

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

how can I loop through the children of the above li element that fall between the li itself and script element, i.e. script and span elements are out of the loop ... thanks in advace !!

note: I do not want to use JQuery, because my app is using Protoype and it will conflict with JQuery if I use both of them together, i'd appreciate it if there's a quick solution using Prototype.

I have this DOM tree:

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

how can I loop through the children of the above li element that fall between the li itself and script element, i.e. script and span elements are out of the loop ... thanks in advace !!

note: I do not want to use JQuery, because my app is using Protoype and it will conflict with JQuery if I use both of them together, i'd appreciate it if there's a quick solution using Prototype.

Share Improve this question edited Mar 2, 2011 at 10:34 asked Mar 2, 2011 at 10:07 JaHelia 1,2211 gold badge15 silver badges24 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 9

would something like this work for you?

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

Note, the if the "data" in your example are strings, these will exist in the child heirarchy as instances of textNodes. if you need to do special processing on this stuff, you will want to do a check such as

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

check out https://developer.mozilla/en/nodeType for more node types

You could use jQuery selectors:

Get all children of <li>:

$('li').children();

Exclude unwanted elements:

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

Then loop over the selection:

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

here's a solution i hacked for you :

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

first span in Li

hav eyou taken a look at jquery ? it has a very nic query syntax. i`m nit sure what elements exactly you want to loop over but for intance: $('li > img') will return all images under all list items. check out the spec for more jquery

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to loop through some specific child nodes - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)