Search code examples
javascriptjqueryhtmldomparents

Get All Parents Info Up Until Specified Parent

I have this html codes example:

<html>
    <body>
        <div>
            <div id="stophere">
               <h4 class="parentclass"> 
                <span class="target">Clicked</span>
               </h4>
            </div>
        </div>
    </body>
</html>

From the html codes example above, I want to get all parents' tag name of class target (when receiving click event) down from div with id stophere.

I tried this code:

$(ev.target).parents()
            .map(function() {
            return this.tagName;
            })
            .get()
            .join( ", " );

But it includes all parents' tag names above stophere. While the result I want is only 1 div and 1 h4.

What is the correct way to get all parents of target down from stophere?

Solution

  • You can use the parentsUntil method for that

    $(ev.target).parentsUntil($('#stophere').parent())

    Note that it's non-inclusive, so we pass the parent of #stophere to include that element as well

    FIDDLE