How to Get a Set of DIV IDs Without JQuery

Question

I have a bunch of links that have ids that correspond with classes attached to other links. I am passing the link id through as a variable and then using that variable to find the other links by class with JavaScript. Here's a code example:

    var elements = document.getElementsByClassName(id);
    for(var i=0; i<elements.length; i++){}

So far so good, I am able to do anything I want to those related links. However, now I want to get the ids of the divs in which those links reside. Is there any way to use JavaScript to find the div id of a link without using JQuery?

Before you ask, why not just use JQuery? I'm new at this and haven't learned JQuery yet. Furthermore, I would like to understand how to do things in JavaScript before I go trying to learn something else.

In principle, your element should have the `id` method on it for it to be called. Have you tried that? — Jonathan Allard, Mar 09 '13 at 04:53
It has the link's id. Is there a simple way of calling the div id as well? — parap, Mar 09 '13 at 04:56
the link is in the div you want so it's linkElement.parentNode.parentNode ... — HMR, Mar 09 '13 at 04:59
If the link is inside a paragraph inside a div, then do I have to walk up two steps to get to my div? i.e. this.parentNode.parentNode — parap, Mar 09 '13 at 05:03

score 2 · Accepted Answer · edited May 23 '17 at 12:11

To access a parent element ID, you can use:

var elementId = elements[i].parentNode.id;

See here for more info: Getting the parent div of element

To find the nearest DIV parent, you should be able to do something like this:

var elements = document.getElementsByClassName(id);
for(var i=0; i<elements.length; i++){
    var parent = elements[i].parentNode;

    while (parent.localName != null && parent.localName.toLowerCase() != "div") {
        parent = parent.parentNode;
    }

    if (parent != null && parent.id != null) {
        var parentId = parent.id;

        alert(parentId);
    }
}

EDIT: Just added some null checking, in case a class is NOT contained in any DIV.

Here is the test I used:

<html>
<body>
    <div id="asdf">
        <a href="#" class="blah">1</a>
        <a href="#" class="blah">2</a>
    </div>
    <div id="asdf2">
        <span>
            <a href="#" class="blah">3</a>
            <a href="#" class="blah">4</a>
        </span>
    </div>
    <!-- These two won't cause an alert since no DIV surrounds them -->
    <a href="#" class="blah">5</a>
    <a href="#" class="blah">6</a>
    <div id="asdf3">
        <span>
            <a href="#" class="blah">7</a>
            <a href="#" class="blah">8</a>
        </span>
    </div>

    <input type="button" onclick="run();return false;" value="Run" />

    <script>
    // This will cause 6 alerts: asdf, asdf, asdf2, asdf2, asdf3, asdf3
    function run() {
        var elements = document.getElementsByClassName("blah");
        for(var i=0; i<elements.length; i++){
            var parent = elements[i].parentNode;

            while (parent.localName != null && parent.localName.toLowerCase() != "div") {
                parent = parent.parentNode;
            }

            if (parent != null && parent.id != null) {
                var parentId = parent.id;

                alert(parentId);
            }
        }
    }
    </script>
</body>
</html>

The only thing I don't like about your answer is the fact I can only give you one upvote. Perfect. — parap, Mar 09 '13 at 18:53

score 0 · Answer 2 · answered Mar 09 '13 at 04:56

0

You can use element.parentNode.id to get the parent element's id attribute.

answered Mar 09 '13 at 04:56

Blender

289,723
53
439
496

what if the div is not the parent? – Hogan Mar 09 '13 at 04:58
@Hogan: Then you restructure your HTML so that you don't have to run up and down the tree. – Blender Mar 09 '13 at 04:59

How to Get a Set of DIV IDs Without JQuery

2 Answers2