Christian Heilmann

Determining the depth of a nested HTML list

Monday, March 26th, 2007 at 3:29 pm

I had this problem the other day that I needed to know how many nesting levels a menu has. After some failed attempts of walking the DOM and lots of comparisons I realised that it is actually a lot easier than I thought:

function treedepth(o){
var nested = o.getElementsByTagName('ul');
var allcount = 0;
for(var i=0,j=nested.length;i<;i++){
var count = 1;
var kid = nested[i].getElementsByTagName('ul')[0];
while(kid!==undefined){
count++;
kid = kid.getElementsByTagName('ul')[0];
}
if(count>allcount){allcount=count;}
}
return allcount;
}

You can check a testcase for treedepth here.

Any better way to do this?

[tags]JavaScript,DOM,nodetree,list,htmllist,depth,code,webdevtrick[/tags]

Share on Mastodon (needs instance)

Share on BlueSky

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

Don't stop thinking, AI Slop vs. OSS Security, rolling your own S3 Despite AI you still need to think, Bitter lessons from building AI products,  AI Slop vs. OSS security and pointer pointer…
200: Building for the web, what's left after rm -rf & 🌊🐴 vs AI What remains after you do a rm -rf? Why do LLMs know about a seahorse emoji? What image formats should you use? How private is your car?
Word is Doomed, Flawed LLM benchmarks, hard sorting and CSS mistakes Spot LLM benchmark flaws, learn why sorting is hard, how to run Doom in Word and how to say "no" like a manager.
30 years of JS, Browser AI, how attackers use GenAI, whistling code Learn how to use AI in your browser and not on the cloud, why AI makes different mistakes than humans and go and whistle up some code!
197: Dunning-Kruger steroids, state of cloud security, puppies>beer

My other work: