how to loop through some specific child nodes

Question

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.

score 9 · Accepted Answer · answered Mar 02 '11 at 11:14

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.org/en/nodeType for more node types

score 2 · Answer 2 · answered Mar 02 '11 at 10:30

2

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

answered Mar 02 '11 at 10:30

Munneson

892
1
6
3

BTW: jQuery can play nicely with other libraries that also use '$'. There is a no-conflict mode for this: http://api.jquery.com/jQuery.noConflict/ – Munneson Mar 02 '11 at 10:33
I have used this method (noConflict) but it's not the problem, the site crashes in many pages and there's no specific reason for that, If i remove the Jquery library no crash happens .. – JaHelia Mar 02 '11 at 10:39
just a selectors library can easily by downloaded giving you the power of jQuery selectors and nothing else – Umair Jabbar Mar 02 '11 at 11:19
Hi Umair, where can i download the selectors library alone without the whole JQuery thing ? – JaHelia Mar 02 '11 at 13:36

score 1 · Answer 3 · answered Apr 29 '13 at 11:55

1

here's a solution i hacked for you :

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

first span in Li

answered Apr 29 '13 at 11:55

Genjuro

7,405
7
41
61

score 0 · Answer 4 · answered Mar 02 '11 at 10:16

0

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

answered Mar 02 '11 at 10:16

Menahem

3,974
1
28
43

I can't user JQuery because I'm using Prototype in my application and it will conflict with JQuery if I use it. – JaHelia Mar 02 '11 at 10:25
ok , saw your edit. to the guy that did the -1, i answered before JeHelia added the fact he could not use JQuery. – Menahem Feb 28 '13 at 13:33

how to loop through some specific child nodes

4 Answers4

Linked