Better .parentNode Management

[jfyounce]

Hi all,

I would like to not have to write:
.parentNode.parentNode.parentNode.parentNode.parentNode

Instead I would like to just write something like this instead:
.parentNode(5)
to represent that there needs to be 5 .parentNode

Obviously I know what I wrote up there is not correct but I was looking for help.

About six months ago I found a web page that showed me how to do this but I lost the address

So any help would be fantastic!

jfyounce

[Pepejeria]

This depends on your HTML/XML looks, but offsetParent might maybe help you in some cases.

[kyberfabrikken]

You could use this:

getParentNode = function($element, $levels) {
  if (typeof($levels) == "undefined") {
    $levels = 1;
  }
  while ($level > 0) {
    $element = $element.parentNode;
    --$level;
  }
  return $element;
}

You could also extend HtmlElement.prototype, but extending prototypes of core objects is a bad practise.

[jfyounce]

Thank you for your reply!

So how would I implement that for this?

var bigSwatchImg = pThisSwatch.parentNode.parentNode.parentNode.getElementsByTagName('div')[0].getElementsByTagName('img')[0];

[Pepejeria]

jfyounce, how about adding ids to your HTML? Would that be possible? If not, how about showing the HTML you refer to? Would be interesting to see what you want to access in its DOM.

[kyberfabrikken]

So how would I implement that for this?

var bigSwatchImg = getParentNode(pThisSwatch, 3).getElementsByTagName('div')[0].getElementsByTagName('img')[0];

But Pepejeria is right - it may be that you have a deeper lying problem with your application. If you really need to do such complex navigation, using xpath might be an option.