.context

jQuery

previous page next page

.context

Categories: Internals | Properties > Properties of jQuery Object Instances

context Returns: Element

Description: The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.

  • version added: 1.3context

The .live() method for binding event handlers uses this property to determine the root element to use for its event delegation needs.

The value of this property is typically equal to document, as this is the default context for jQuery objects if none is supplied. The context may differ if, for example, the object was created by searching within an <iframe> or XML document.

Note that the context property may only apply to the elements originally selected by jQuery(), as it is possible for the user to add elements to the collection via methods such as .add() and these may have a different context.

Example:

Determine the exact context used.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        body { cursor:pointer; }
                                    

                                  

                                  

                                    

                                        div { width:50px; height:30px; margin:5px; float:left;
                                    

                                  

                                  

                                    

                                              background:green; }
                                    

                                  

                                  

                                    

                                        span { color:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        Context:<ul></ul>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("ul")
                                      
                                    

                                  

                                  

                                    

                                        .append("<li>" + $("ul").context + "</li>")
                                    

                                  

                                  

                                    

                                        .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page