Help understand jQuery selector example

Question

The following code was used in the demo version of timers jQuery. I don’t understand what is happening in the selector in line 2. It seems that he selects the p element, but then what is the second argument after the decimal point - demos - is 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> 

thanks

Answer 1

Defines the search context. Mostly a filter.

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

So, in this example, he is looking for the demos element for .uncontrolled-interval p . If you have this markup, it will select only one of the 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> 

Answer 2

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

What it is: select each element that matches the CSS selector provided in this context , with context , which means the DOM region that you have already selected.

In other words, it says: use context as the root of the DOM tree you are looking for, as opposed to the root of the document.

Answer 3

In addition to the other answers, the context works like . find () :

Inside the selector context is implemented using the .find () method, therefore $ ('span', this) is equivalent to $ (This) .find ('span').

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