将jquery选择器存储在变量中
The*_*Nik 33 html javascript jquery jquery-selectors
在以下示例中,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 );
T.J*_*der 109
你对什么有一个根本的误解
variableName = $("selector here");
确实.它不"存储选择器".它运行您针对DOM中当前元素提供的选择器,创建jQuery对象,将匹配元素放在jQuery对象中,并为您提供对该jQuery对象的引用.选择器未存储(modulo jQuery internals).
所以给出:
<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添加另一个匹配元素对引用的jQuery对象没有影响$divs.
如果我们在那时重新运行查询:
$divs = $("div.foo");
......然后我们有:
如果你有一个包含DOM元素的jQuery对象,并且你将后代元素添加到那个DOM元素,那么使用那个jQuery对象(比如说).find会看到后代.那是因为父DOM元素已经存在于jQuery对象中.例如,添加一个我们已经从jQuery对象引用span的divs :
如果我们在那时使用.findon $divs寻找a 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对象来完成.(只是想补充一点,抱歉,如果它是微不足道的:)) (7认同)
- 说什么？很棒的答案!现在jQuery对我来说更清楚=)非常感谢你! (2认同)
- @TheGr8_Nik：不客气。jQuery 可能需要一点时间来“获取”。:-) (2认同)
- 感谢您花费一些时间来制作答案。 (2认同)
我认为接受的答案非常好，但它可以被解释为表明将 JQuery 对象分配给变量总是不安全的。这样做没问题——只要变量引用的 DOM 对象在您以影响后续代码的方式访问它之前不会被更改。
超文本标记语言
<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);
})
| 归档时间： |
|
| 查看次数： |
49224 次 |
| 最近记录： |