findContainer()

When handling events in the DOM it's often useful to get a reference to the containing element (say, a div) around a certain item. For example: you've got a "hide" link inside some element (the div) and you want to detect the click on the "hide" link, then hide the (div) element.

So... you need a handle on that containing element (the div) so you can hide it.

With this in mind, I created what I'm sure is highly unoriginal, but it works quite well for me. I present: findContainer().

Note: YUD = Yahoo.util.Dom.

function findContainer(el, containerCssClass) { var currentNode = el; while (!YUD.hasClass(currentNode,containerCssClass)); { currentNode = currentNode.parentNode; //failsafe, they went all the way up if (currentNode.parentNode.nodeName == 'HTML') return el; } return currentNode; }

This function takes 2 arguments. The element being acted (probably clicked) upon (the "hide" link in this example) and the css class of the containing element.  It will work it's way up the tree until it runs into an element with the specified class. Once that class is encountered, it returns that element. You can then hide it (or whatever).

You could easily re-purpose this to have it take an element type as the second argument. (e.g. 'DIV' or 'LI') with the same effect. The cssClass method feels more predictable to me.

Comments

[como gano dinero]

I couldn't agree with you more..

[yoville coins]

I could not agree with you more.