将jquery选择器存储在变量中 [英] Store jquery selector in variable
问题描述
在以下示例中，存储的jQuery选择器返回错误的值。
有可能存储选择器而不是结果？
js代码：
//存储jQuery选择器
var
$ container = $（'.container'），
$ element1 = $ container.find（'。元素'），
$ element2 = $（'.element'，$ container），
$ element3 = $（'.element'）;
//将元素追加到容器
（i = 0; i <10; ++ i）{
$ container.append（$（element_html））;
}
//尝试存储的选择器 - >返回0
console.log（1：+ $ element1.length）;
console.log（2：+ $ element2.length）;
console.log（3：+ $ element3.length）;
为什么，如果我使用容器选择器来查找元素，它的工作原理是什么？
选择器返回指针到匹配的元素而不是元素？
//这个工程
console.log（1：+ $ container.find（'.element'）.length）;
console.log（2：+ $（'.element'，$ container）.length）;
console.log（3：+ $（'.element'）.length）;
您对基本的误解是什么
variableName = $（selector here）;
。它不会存储选择器。它运行您对DOM中的 current 元素的选择器，创建一个jQuery对象，将匹配的元素放入jQuery对象中，并为您提供对该jQuery对象的引用。选择器不存储（模数jQuery内部）。
给出：
<身体GT;
< 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对象，并且将后代元素添加到该DOM元素，那么使用该 .find code>会看到后代。这是因为父DOM元素已经存在于jQuery对象中。例如，向 span 添加一个 div 我们已经 jQuery对象：
如果我们在<$ c上使用 .find $ c> $ 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）; //现在是2
因此，在需要时存储选择器是一个存储在某处选择字符串，而不是jQuery对象。
In the following example the stored jQuery selector returns the wrong value.
There is a possibility to store the selectors and not the result?
The js code:
// 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 );
Why, if I use the container selectors to find the elements, it works?
It is beacuse the selector returns the pointer to the matched elements and not the elements?
// this works
console.log( "1: " + $container.find( '.element' ).length );
console.log( "2: " + $( '.element', $container ) .length );
console.log( "3: " + $( '.element' ) .length );
You have a fundamental misunderstanding of what
variableName = $("selector here");
does. It does not "store the selector." It runs the selector you give against the current elements in the DOM, creates a jQuery object, puts the matching elements in the jQuery object, and gives you a reference to that jQuery object. The selector is not stored (modulo jQuery internals).
So given:
<body>
<div class="foo">x</div>
</body>
Then:
var $divs = $("div.foo");
console.log($divs.length); // 1
Gives us this:
If we then add another matching div:
$('<div class="foo"></div>').appendTo(document.body);
Our $divs still only points to the first one; adding another matching element to the DOM had no effect on the jQuery object referenced from $divs.
If we re-run the query at that point:
$divs = $("div.foo");
...then we have:
If you have a jQuery object containing a DOM element, and you add descendant elements to that DOM element, then using that jQuery object with (say) .find will see the descendants. That's because the parent DOM element is already there in the jQuery object. E.g., adding a span to one of the divs that we already reference from our jQuery object:
If we were to use .find on $divs at that point looking for a span, we'd find it, because it's a descendant of one of the elements we already had a reference to.
If you want to re-run the DOM search again later to look for matching elements, you just use $() again; this is implicit in the above, but for clarity:
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
So "storing a selector," when needed, is a matter of storing the selector string somewhere, not the jQuery object.
这篇关于将jquery选择器存储在变量中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
