将 jquery 选择器存储在变量中
Posted
技术标签:
【中文标题】将 jquery 选择器存储在变量中【英文标题】：Store jquery selector in variable 【发布时间】：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 选择器返回一个查询对象，您可以在该对象上进行进一步的操作，这称为链接... 【参考方案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
【讨论】：
以上是关于将 jquery 选择器存储在变量中的主要内容，如果未能解决你的问题，请参考以下文章