Help understanding jQuery selector example

The following code was taking from the timers jQuery plugin demo. I don't understand what is happening in the selector in line 2. It seems it is selecting the p element, but then what is the second argument after the comma - demos - there for?

jQuery:

var demos = $("div.wrapper div.demos");             
$(".uncontrolled-interval p", demos).everyTime(1000,function(i) {
                    $(this).html(i);
                });

HTML:

<div class="wrapper"> 
    <div class="demos">         
        <div class="uncontrolled-interval"> 
            <p>I am transient... *sigh*</p> 
        </div>      
    </div> 
</div>

开发者_StackOverflow中文版

Thanks

---

It specifies the context of the search. Basically a filter.

http://api.jquery.com/jQuery#expressioncontext

So in this example it searches the demos element for .uncontrolled-interval p. If you have this markup, it would still only select the one in demos.

<div class="wrapper">          
    <div class="uncontrolled-interval"> 
        <p>I am transient... *sigh*</p> //Will not select
    </div>     
    <div class="demos">         
        <div class="uncontrolled-interval"> 
            <p>I am transient... *sigh*</p> //Will select
        </div>      
    </div> 
</div>

---

When selecting elements with jQuery using the jQuery function (or its alias $), you can provide a context as well as a selector as described here.

What that says is: select every element that matches the provided CSS selector within the given context, with context meaning the region of the DOM that you have already selected.

Put another way, it says: use the context as the root of the DOM tree being searched, as opposed to the document root.

---

In addition to others answer, context works like .find():

Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span').

Personnaly, I prefer write demos.find(".uncontrolled-interval p") to $(".uncontrolled-interval p", demos)