Next Siblings Selector ("prev ~ siblings”)

jQuery

previous page next page

Next Siblings Selector (“prev ~ siblings”)

Categories: Selectors > Hierarchy

next siblings selector

Description: Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.

  • version added: 1.0jQuery( "prev ~ siblings" )

    prev: Any valid selector.

    siblings: A selector to filter elements that are the following siblings of the first selector.

The notable difference between (prev + next) and (prev ~ siblings) is their respective reach. While the former reaches only to the immediately following sibling element, the latter extends that reach to all following sibling elements.

Example:

Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not a div and the "niece" isn't selected since it is a child of a sibling, not an actual sibling.

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>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        div,span {
                                    

                                  

                                  

                                    

                                          display:block;
                                    

                                  

                                  

                                    

                                          width:80px;
                                    

                                  

                                  

                                    

                                          height:80px;
                                    

                                  

                                  

                                    

                                          margin:5px;
                                    

                                  

                                  

                                    

                                          background:#bbffaa;
                                    

                                  

                                  

                                    

                                          float:left;
                                    

                                  

                                  

                                    

                                          font-size:14px;
                                    

                                  

                                  

                                    

                                        }
                                    

                                  

                                  

                                    

                                        div#small {
                                    

                                  

                                  

                                    

                                          width:60px;
                                    

                                  

                                  

                                    

                                          height:25px;
                                    

                                  

                                  

                                    

                                          font-size:12px;
                                    

                                  

                                  

                                    

                                          background:#fab;
                                    

                                  

                                  

                                    

                                        }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <div>div (doesn't match since before #prev)</div>
                                    

                                  

                                  

                                    

                                        <span id="prev">span#prev</span>
                                    

                                  

                                  

                                    

                                        <div>div sibling</div>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <div>div sibling <div id="small">div niece</div></div>
                                    

                                  

                                  

                                    

                                        <span>span sibling (not div)</span>
                                    

                                  

                                  

                                    

                                        <div>div sibling</div>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("#prev ~ div").css("border", "3px groove blue");
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page