What's a good way to return an element's path?

Question

say I have a button, but I don't know where it is on run-time. Is it possible to return the location of the button?

edit: The "button" looks like this, and there's more unordered lists that are identical to this

<ul>
    <li><a href='#'><span>Add</span></a>
        <ul class="calendar-options">
            <li><a href='#' onclick="EventOne()"><span>One</span></a></li>
            <li><a href='#' onclick="EventTwo()"><span>Two</span></a></li>
            <li><a href='#' onclick="EventThree()"><span>Three</span</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li><a href='#'><span>Add</span></a>
        <ul class="calendar-options">
            <li><a href='#' onclick="EventOne()"><span>One</span></a></li>
            <li><a href='#' onclick="EventTwo()"><span>Two</span></a></li>
            <li><a href='#' onclick="EventThree()"><span>Three</span</a></li>
        </ul>
    </li>
</ul>
<ul>
    <li><a href='#'><span>Add</span></a>
        <ul class="calendar-options">
            <li><a href='#' onclick="EventOne()"><span>One</span></a></li>
            <li><a href='#' onclick="EventTwo()"><span>Two</span></a></li>
            <li><a href='#' onclick="EventThree()"><span>Three</span</a></li>
        </ul>
    </li>
</ul>

See this: http://stackoverflow.com/questions/1484875/i-need-the-full-dom-node-path-of-element — Dan Saunders, Mar 18 '15 at 14:46
Sure, but you need some other way to find the element. Do you have the element's name? What do you know about the button to uniquely identify it? — Dan Saunders, Mar 18 '15 at 15:17
Sounds like you looking for `event.target`: https://developer.mozilla.org/en-US/docs/Web/API/Event/target — webdesserts, Mar 18 '15 at 15:33
So what are you trying to do? In the event handler (such as the EventOne() function), you want to get hold of the anchor element? — Dan Saunders, Mar 18 '15 at 15:43

score 0 · Accepted Answer · answered Mar 18 '15 at 15:52

0

Passing 'this' to the handler should give you the element that was clicked. Is this what you want?

<script>
    function EventOne(el) { 
        // Do something with el
    }
</script>    

<ul>
    <li><a href='#'><span>Add</span></a>
        <ul class="calendar-options">
            <li><a href='#' onclick="EventOne(this)"><span>One</span></a></li>
            <li><a href='#' onclick="EventTwo(this)"><span>Two</span></a></li>
            <li><a href='#' onclick="EventThree(this)"><span>Three</span</a></li>
        </ul>
    </li>
</ul>

answered Mar 18 '15 at 15:52

Dan Saunders

280
2
10

That looks like it'd do the trick, can I go up the DOM tree through parents with that yea? (small note: each unordered list is in a table, and I'm trying to get the row) – Cody Mar 18 '15 at 16:01
@Cody you can traverse the Dom upward using `el.parentNode` https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode – webdesserts Mar 18 '15 at 16:06
Personally I would use JQuery as it's ideal for this but if that's not an option, looping using parentNode as per @mcmullins would do it – Dan Saunders Mar 18 '15 at 16:09
Just note that if if you use something like this, your event will always have to be attached in your HTML. If in the future, you decide to attach your events in JavaScript, you will need to refactor to use `event.target`/`event.currentTarget`. – webdesserts Mar 18 '15 at 16:11
How would I be able to use JQuery for this if it's ideal? (no id's, etc etc). @mcmullins the functions they're calling won't be modified after I'm done with them – Cody Mar 18 '15 at 16:13
You don't need IDs to traverse the DOM with JQuery, you can search by the type of the element. Search upwards to find the first . – Dan Saunders Mar 18 '15 at 16:17
Yeah searching through tags isn't an option, it's kind of a mess. Searching by class I might as well do parentNode anyway. – Cody Mar 18 '15 at 16:21
@Cody If you have control over the html (you're the one adding those `onclick` attributes), either through a **class** or a [data attribute](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) – webdesserts Mar 18 '15 at 16:21
@Cody once you have found the element, you would then use something like http://api.jquery.com/parents/ to find your parentNode. So... `$(el).parents('tr').first()` or something like that. – webdesserts Mar 18 '15 at 16:23
I'm trying to compartmentalize (mostly) everything within JavaScript so there's little to no room for future content-error or updates to the html. – Cody Mar 18 '15 at 16:27
@Cody if you can't update the html, you will need to find something unique about those elements that no other element has in common. Maybe that's as simple as `$('table td a[href="http://myuniquewebsite.com"]')`. It could become much specific. It all depends on your use case. Once you have found the elements in quesiton you would then need to attach the event via something like `$(el).on('click', myEventFunction)` – webdesserts Mar 18 '15 at 16:32
@Cody That is... if those `onclick` attributes aren't already defined. If they are defined, you would need to be able to either define those functions yourself (they aren't from a third-party script) or wrap them with your own version of the function that calls the original. – webdesserts Mar 18 '15 at 16:34
@Cody Note: you do not necessarily need jquery if you want to use those "css-like" selectors in your javascript. See [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector). – webdesserts Mar 18 '15 at 16:37

What's a good way to return an element's path?

1 Answers1