IE and parentNode

[thomas_lundin]

Hi,
on Macs, iOS, Win - with the latest Safari, Chrome and Firefox - the following code that is part of a little hack of mine, works as expected:

var clickedInstance = hypeDocument.getSymbolInstanceById(element.parentNode.parentNode.parentNode.parentNode.id);

…but not in IE 11 and earlier versions.

Any hints?

Seems to be something with element.parentNode.id…
…as if the levels need to fetch the id is different in IE.

[strmiska]

i get same problems with symbols on IE11. does anyone solve this issue?

[stephen]

The dom hierarchy can be different in different browsers (sometimes we need a container node and sometimes we do not). This means you can't rely on parentNode always being the same element. You may want to use a loop instead and look at the element class to make sure you find the element you are looking for.

[thomas_lundin]

OK… sort of think I understand.

In my case,
an element or a symbol within a symbol is tapped/clicked. A javascript is triggered and depending on which symbol instance that is the 'holder' of these elements and symbols, different things should happen.

What is the best way to solve something like this, covering e.g. IE browsers?
How would a loop like that be?

As it is now, it seems to work on OS X, iOS, Android, with the webkit and gecko based browsers…

[stephen]

How would a loop like that be?

It depends a bit on your setup, but the basic idea is that you iterate through parentNodes until you find the one you are looking for. You could either set a class on all symbols and look for that or have specific ids on the symbols you care about.

var parent = element;
while (parent != null) {
    if (parent.id == 'mySymbolId') {
        //do work here
        console.log('found symbol ' + parent);
        break;
    }
    parent = parent.parentNode;
}