Question

The following markup is exaggerated to demonstrate the problem.

I’m trying to capture the main row of a clicked link…it just so happens that its buried deep within a bunch of other things.

<div class="mainRow">
...
</div>
<div class="mainRow">
    <div>
        <div>
            <div>(x number of layers)
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <a class="someLink">click me</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>(/x number of layers)
        </div>
    </div>
</div>
<div class="mainRow">
...
</div>

In mootools *, you can manually get that parent element by saying .getParent().getParent()...<xTimes>...getParent() etc

Is there a way to arbitrarily traverse up a chain of parents x number of times so that it stops at div.mainRow ?

(Edit: lol… sorry everyone, i guess i wrote “jquery” in my question by mistake. i am asking about mootools.)

Answer 1

parent traversal is simple in mootools.

in your case, the getParent([optional selector]) method will try to match any parent node:
http://mootools.net/docs/core/Element/Element#Element:getParent – so .getParent("div.mainrow") will return the first match or null – if none found.

you can also use a reverse combinator selector at times, though not on a click event, probably.

eg, document.getElements("div.mainRow a.someLink ! div.mainRow") will return only the div.mainRow elements that have a link with class “someLink” directly. in a way, like .contains() but you can return the parent of the a as well just by appending ! div