将 jquery 选择器存储在变量中答案

【问题标题】：Store jquery selector in variable将 jquery 选择器存储在变量中
【发布时间】：2014-07-26 01:43:02
【问题描述】：

在以下示例中，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

【问题讨论】：

jquery 选择器返回一个查询对象，您可以在该对象上进行进一步的操作，这称为链接...

标签： javascript jquery html jquery-selectors

【解决方案1】：

你对什么有一个根本性的误解

variableName = $("selector here");

确实如此。它不会“存储选择器”。它针对 DOM 中的 current 元素运行您提供的选择器，创建一个 jQuery 对象，将匹配的元素放入 jQuery 对象中，并为您提供对该 jQuery 对象的引用。选择器未存储（模 jQuery 内部）。

所以给定：

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

然后：

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

给我们这个：

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

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

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

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

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

...那么我们有：

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

如果我们当时在$divs 上使用.find 来寻找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 对象。

【讨论】：

所以在回答他的问题时，应该通过存储 string 而不是返回的 jQuery 对象来存储选择器。（只是想补充一点，对不起，如果它是微不足道的:)）
@TheGr8_Nik：是的，没错。我在答案中添加了一些图片以使其更清晰。 jQuery 对象是在您创建对象时匹配选择器的元素的“集合”（在集合论中）。
该说什么？很好的答案！现在 jQuery 对我来说更清楚了 =) 非常感谢！！
@TheGr8_Nik：不客气。 jQuery 可能需要一点时间来“获取”。 :-)
感谢您花时间制作答案。

【解决方案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

【讨论】：