jQuery Tutorial Tutorials - jQuery .parentsUntil() method

The .parentsUntil() method in jQuery is used to get the ancestors of each element in the set of matched elements level by level until meeting the element matched by the selector ,DOM node, or jQuery object.

jQuery .parentsUntil() method Syntax

.parentsUntil([selector][,filter])
.parentsUntil([element][,filter])

jQuery .parentsUntil() method Example

example

Find the ancestors of <li id="python"> up to <li class="category">.

HTML

<ul>
    <li class="category">Language
        <ul>
            <li class="lang">Java
                <ul>
                    <li>Java tutorial</li>
                    <li>Java Examples</li>
                </ul>
            </li>
            <li class="lang">Python
                <ul id="python">
                    <li>Python tutorial</li>
                    <li id="pyex">Python Examples</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="category">Tools</li>
    <li class="category">Lautturi</li>
</ul>

jQuery

var parentElems = $( "#python" ).parentsUntil('.category')
    .map(function(){
      return this.tagName;  
    })
    .get()
    .join(", ");

$('#log').html("The matched ancestors are:"+ parentElems);

Result

The `#python` element's parents are:LI, UL, LI, UL, BODY, HTML

Try now

example

Find the ancestors of <li id="pyex"> that have tag name ul up to <li class="category">.

$( "#pyex" ).parentsUntil('.category','ul').css( "border", "1px solid red" );

Try now