帮助理解 jQuery 选择器示例

Question

以下代码取自 timers jQuery 插件演示。我不明白第 2 行的选择器中发生了什么。看起来它正在选择 p 元素，但是逗号后面的第二个参数 - demos - 是为了什么？

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>

谢谢

Answer 1

它指定搜索的上下文。基本上是一个过滤器。

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

所以在这个例子中它搜索 < .uncontrol-interval p 的 code>demos 元素。如果您有此标记，它仍然只会选择 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

当使用 jQuery 使用 jQuery 函数（或其别名 $）选择元素时，您可以提供上下文以及选择器，如 此处。

也就是说：在给定的 context 中选择与所提供的 CSS selector 相匹配的每个元素，其中 context 表示您选择的 DOM 区域已经选择了。

换句话说，它说：使用 context 作为正在搜索的 DOM 树的根，而不是文档根。

Answer 3

除了其他答案之外，上下文的工作方式类似于 .find()：

在内部，选择器上下文是
使用 .find() 方法实现，
所以 $('span', this) 相当于
$(this).find('span').

就我个人而言，我更喜欢将 demos.find(".uncontrol-interval p") 写入 $(".uncontrol-interval p", demos)