JavaScript: recursive function does not work like it should

Question

I'm trying to do a recursive function to find HTMLelement by class, but for some reason it stops after it reaches a child element without children. Here is the code:

var alpha = Obj.elementByClass(document.body, "message");

Obj.elementByClass = function(element, cl) {
   var elementChildren = element.children,
       elementChildrenLength = elementChildren.length;

   for(var num=0; num<elementChildrenLength; num++) {
      if(elementChildren[num].className && elementChildren[num].className.indexOf("cl") > -1) {
         return elementChildren[num];
      }
      else if(elementChildren[num].children.length !=0) {
         return Obj.elementByClass(elementChildren[num], cl);
      }
   }
};

Please don't advice jquery or other libraries, I would like to understand why it stops when it reaches the element without children.

Thanks!

As a side note, in your else if block, you return something as soon as there is a child - but it may be possible that a child doesn't have any descendant with that specific class name. I recommend chceking whether the recursive call in the else if block actually returns an element. As it is now, the return breaks the whole for loop. — pimvdb
– pimvdb, Commented Jul 6, 2012 at 10:48

Anthony Grist · Accepted Answer · 2012-07-06 10:36:00Z

1

Because the for loop never executes when the element doesn't have children, due to both num and elementChildrenLength being 0 and the condition num<elementChildrenLength never being true.

answered Jul 6, 2012 at 10:36

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jimmery · Accepted Answer · 2012-07-06 10:37:46Z

1

if elementChildrenLength is equal to zero then the entire for loop block will not execute.

best way to avoid this is to wrap the for loop block with something along the lines of:

if(elementChildrenLength==0){
    return 0;
}else{
   for(var num=0; num<elementChildrenLength; num++) {
       //for loop block here
   }
}

answered Jul 6, 2012 at 10:37

Jimmery

10.2k25 gold badges89 silver badges166 bronze badges

Comments

Mitya · Accepted Answer · 2012-07-06 11:02:41Z

Obj.elementByClass = function(element, cl) {
   for(var i=0, len = element.children.length; i<len; i++) {
    if (element.children[i].className && new RegExp('\\b'+cl+'\\b').test(element.children[i].className))
       return element.children[i];
    else if(element.children[i].children.length)
       return Obj.elementByClass(element.children[i], cl);
   }
};

A couple of points:

you were calling the function before it was defined (and, since this is not a hoisted function, that would error)
the test for the class is now tighter, because it now disallows the class name found in other classnames that share the same word (the check is now done with REGEXP, using word bounaries)
your indexOf() was looking explicitly for the string "cl", where I think you meant the argument cl
I cut it down a bit for readability
as the code is currently, you return only the first matching node, not all of them

KooiInc · Accepted Answer · 2012-07-06 11:45:44Z

1

As far as I can see, you are searching for the first child of the body element with className 'message'. May I suggest this alternative?

document.querySelector('body .message')

The function returns undefined because the first condition AND else if(elementChildren[num].children.length !=0) both are not true. So, nothing to do, exit, nothing returned.

edited Jul 6, 2012 at 11:45

answered Jul 6, 2012 at 10:52

KooiInc

123k32 gold badges145 silver badges181 bronze badges

Comments

Arnaud Le Blanc · Accepted Answer · 2012-07-06 11:58:03Z

1

Non Element nodes (e.g. text nodes) do not have a childNodes property, so trying to read .children.length on them throws an error, which aborts the execution.

You have to verify that the node is an Element:

for(var num=0; num<elementChildrenLength; num++) {
    if (elementChildren[num].nodeType !== 1) {
        continue;
    }
    ...

Or just check that the node has a childNodes property before accessing it:

else if(elementChildren[num].children && elementChildren[num].children.length !=0) {

edited Jul 6, 2012 at 11:58

answered Jul 6, 2012 at 10:36

Arnaud Le Blanc

100k24 gold badges211 silver badges196 bronze badges

Collectives™ on Stack Overflow

JavaScript: recursive function does not work like it should

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related