Home/ Questions/Q 4535226
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T14:22:44+00:00

HTML <body> <div class=lol> <a class=rightArrow href=javascriptVoid:(0); titleNext image> </div> </body> Pseudo Code $(.rightArrow).click(function()

  • 0

HTML

<body>
<div class="lol">
<a class="rightArrow" href="javascriptVoid:(0);" title"Next image">
</div>
</body>

Pseudo Code

$(".rightArrow").click(function() {
rightArrowParents = this.dom(); //.dom(); is the pseudo function ... it should show the whole
alert(rightArrowParents);
});

Alert message would be:

body div.lol a.rightArrow

How can I get this with javascript/jquery?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using jQuery, like this (followed by a solution that doesn’t use jQuery except for the event; lots fewer function calls, if that’s important):

    $(".rightArrow").click(function () {
    const rightArrowParents = [];
    $(this)
        .parents()
        .addBack()
        .not("html")
        .each(function () {
            let entry = this.tagName.toLowerCase();
            const className = this.className.trim();
            if (className) {
                entry += "." + className.replace(/ +/g, ".");
            }
            rightArrowParents.push(entry);
        });
    console.log(rightArrowParents.join(" "));
    return false;
});

    Live example:

    $(".rightArrow").click(function () {
    const rightArrowParents = [];
    $(this)
        .parents()
        .addBack()
        .not("html")
        .each(function () {
            let entry = this.tagName.toLowerCase();
            const className = this.className.trim();
            if (className) {
                entry += "." + className.replace(/ +/g, ".");
            }
            rightArrowParents.push(entry);
        });
    console.log(rightArrowParents.join(" "));
    return false;
});
    <div class="   lol   multi   ">
    <a href="#" class="rightArrow" title="Next image">Click here</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    (In the live examples, I’ve updated the class attribute on the div to be lol multi to demonstrate handling multiple classes.)

    That uses parents to get the ancestors of the element that was clicked, removes the html element from that via not (since you started at body), then loops through creating entries for each parent and pushing them on an array. Then we use addBack to add the a back into the set, which also changes the order of the set to what you wanted (parents is special, it gives you the parents in the reverse of the order you wanted, but then addBack puts it back in DOM order). Then it uses Array#join to create the space-delimited string.

    When creating the entry, we trim className (since leading and trailing spaces are preserved, but meaningless, in the class attribute), and then if there’s anything left we replace any series of one or more spaces with a . to support elements that have more than one class (<p class='foo bar'> has className = "foo bar", so that entry ends up being p.foo.bar).

    Just for completeness, this is one of those places where jQuery may be overkill, you can readily do this just by walking up the DOM:

    $(".rightArrow").click(function () {
    const rightArrowParents = [];

    for (let elm = this; elm; elm = elm.parentNode) {
        let entry = elm.tagName.toLowerCase();
        if (entry === "html") {
            break;
        }
        const className = elm.className.trim();
        if (className) {
            entry += "." + className.replace(/ +/g, ".");
        }
        rightArrowParents.push(entry);
    }
    rightArrowParents.reverse();
    console.log(rightArrowParents.join(" "));
    return false;
});

    Live example:

    $(".rightArrow").click(function () {
    const rightArrowParents = [];

    for (let elm = this; elm; elm = elm.parentNode) {
        let entry = elm.tagName.toLowerCase();
        if (entry === "html") {
            break;
        }
        const className = elm.className.trim();
        if (className) {
            entry += "." + className.replace(/ +/g, ".");
        }
        rightArrowParents.push(entry);
    }
    rightArrowParents.reverse();
    console.log(rightArrowParents.join(" "));
    return false;
});
    <div class="   lol   multi   ">
    <a href="#" class="rightArrow" title="Next image">Click here</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    There we just use the standard parentNode property (or we could use parentElement) of the element repeatedly to walk up the tree until either we run out of parents or we see the html element. Then we reverse our array (since it’s backward to the output you wanted), and join it, and we’re good to go.

    • 0