.parentsUntil()

jQuery

previous page next page

.parentsUntil()

Categories: Traversing > Tree Traversal

.parentsUntil( [selector ] [, filter ] ) Returns: jQuery

Description: Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.

  • version added: 1.4.parentsUntil( [selector ] [, filter ] )

    • selector
      Type: Selector
      A string containing a selector expression to indicate where to stop matching ancestor elements.
    • filter
      Type: Selector
      A string containing a selector expression to match elements against.

  • version added: 1.6.parentsUntil( [element ] [, filter ] )

    • element
      Type: Element
      A DOM node or jQuery object indicating where to stop matching ancestor elements.
    • filter
      Type: Selector
      A string containing a selector expression to match elements against.

Given a selector expression that represents a set of DOM elements, the .parentsUntil() method traverses through the ancestors of these elements until it reaches an element matched by the selector passed in the method's argument. The resulting jQuery object contains all of the ancestors up to but not including the one matched by the .parentsUntil() selector.

If the selector is not matched or is not supplied, all ancestors will be selected; in these cases it selects the same elements as the .parents() method does when no selector is provided.

As of jQuery 1.6, A DOM node or jQuery object, instead of a selector, may be used for the first .parentsUntil() argument.

The method optionally accepts a selector expression for its second argument. If this argument is supplied, the elements will be filtered by testing whether they match it.

Example:

Find the ancestors of <li class="item-a"> up to <ul class="level-1"> and give them a red background color. Also, find ancestors of <li class="item-2"> that have a class of "yes" up to <ul class="level-1"> and give them a green border.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <ul class="level-1 yes">
                                      
                                    

                                  

                                  

                                    

                                        <li class="item-i">I</li>
                                    

                                  

                                  

                                    

                                        <li class="item-ii">II
                                    

                                  

                                  

                                    

                                          <ul class="level-2 yes">
                                    

                                  

                                  

                                    

                                            <li class="item-a">A</li>
                                    

                                  

                                  

                                    

                                            <li class="item-b">B
                                    

                                  

                                  

                                    

                                              <ul class="level-3">
                                    

                                  

                                  

                                    

                                                <li class="item-1">1</li>
                                    

                                  

                                  

                                    

                                                <li class="item-2">2</li>
                                    

                                  

                                  

                                    

                                                <li class="item-3">3</li>
                                    

                                  

                                  

                                    

                                              </ul>
                                    

                                  

                                  

                                    

                                            </li>
                                    

                                  

                                  

                                    

                                            <li class="item-c">C</li>
                                    

                                  

                                  

                                    

                                          </ul>
                                    

                                  

                                  

                                    

                                        </li>
                                    

                                  

                                  

                                    

                                        <li class="item-iii">III</li>
                                    

                                  

                                  

                                    

                                      
                                        </ul>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      $("li.item-a").parentsUntil(".level-1")
                                    

                                  

                                  

                                    

                                        .css("background-color", "red");
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      $("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
                                    

                                  

                                  

                                    

                                        .css("border", "3px solid green");
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page