Question

在以下示例中，stored jQuery selector返回错误的值。存储选择器的可能性而不是结果吗？

js代码：

// storing the jQuery selectors
var
  $container = $( '.container' ),
  $element1  = $container.find( '.element' ),
  $element2  = $( '.element', $container ),
  $element3  = $( '.element' );

// append elements to the container
for( i=0; i<10; ++i ){
  $container.append( $(element_html) );  
}

// try the stored selectors -> returns 0
console.log( "1: " + $element1.length );
console.log( "2: " + $element2.length );
console.log( "3: " + $element3.length );

为什么，如果我使用容器选择器来查找元素，它有效吗？选择器将pointer返回到匹配的元素而不是元素？

// this works
console.log( "1: " + $container.find( '.element' ).length );
console.log( "2: " + $( '.element', $container )  .length );
console.log( "3: " + $( '.element' )              .length );

jsFiddle demonstration

Answer 1

你对

的基本误解

variableName = $("selector here");

一样。它不“存储选择器”。它运行您针对DOM中的当前元素提供的选择器，创建jQuery对象，将匹配元素放在jQuery对象中，并为您提供对该jQuery对象的引用。选择器未存储（模jQuery internals）。

所以给出：

<body>
<div class="foo">x</div>
</body>

然后：

var $divs = $("div.foo");
console.log($divs.length);        // 1

给我们这个：

$divs jQuery object pointing at one div in the DOM

如果我们再添加另一个匹配的div：

$('<div class="foo"></div>').appendTo(document.body);

我们$divs仍然只指向第一个;向DOM添加另一个匹配元素对从$divs引用的jQuery对象没有影响。

$divs jQuery object pointing to one div, but there are two in the DOM

如果我们在那时重新运行查询：

$divs = $("div.foo");

...然后我们有：

$divs jQuery object pointing at both divs in the DOM

如果你有一个包含DOM元素的jQuery对象，并且你将 descendant 元素添加到那个DOM元素，那么使用那个（例如）.find的jQuery对象将会看到后代。那是因为父DOM元素已经存在于jQuery对象中。例如，将span添加到我们已经从我们的jQuery对象引用的div之一：

$divs jQuery object pointing at both divs in the DOM, one has a span now

如果我们在.find上使用$divs寻找span，我们会找到它，因为它是我们已经拥有的其中一个元素的后代参考。

如果您想稍后再次重新运行DOM搜索以查找匹配元素，则只需再次使用$();这在上面是隐含的，但为了清楚起见：

var $divs = $("div.foo");
console.log($divs.length);        // 1
$('<div class="foo"></div>').appendTo(document.body);
console.log($divs.length);        // Still 1
$divs = $("div.foo");
console.log($divs.length);        // Now it's 2

因此，“需要时存储选择器”是将选择器字符串存储在某处，而不是jQuery对象。

Answer 2

我认为接受的答案很好，但可以解释为建议将JQuery对象分配给变量总是不安全的。这样做很好 - 只要在以对影响后面的代码的方式访问变量引用的DOM对象之前不改变它。

<强> HTML

<div id="banner-message">
    <p>Hello World</p>
    <button>Change view</button>
</div>

<强>的JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt");
  banner.hide().html("New HTML").fadeIn(2000);
})

JsFiddle

将jquery选择器存储在变量中

2 个答案: