将jQuery选择器存储在变量中

TheGr8_Nik 发表于 Dev

TheGr8_Nik

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

TJ人群

您对什么有一个基本的误解

variableName = $("selector here");

做。它不“存储选择器”。它针对DOM中的当前元素运行选择器，创建一个jQuery对象，将匹配的元素放入jQuery对象，并为您提供对该jQuery对象的引用。选择器未存储（jQuery内部组件）。

因此给出：

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

然后：

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

给我们这个：

$ divs指向DOM中一个div的jQuery对象

如果再添加另一个匹配项div：

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

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

$ divs指向一个div的jQuery对象，但是DOM中有两个

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

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

...那么我们有：

$ div指向DOM中两个div的jQuery对象

如果您有一个包含DOM元素的jQuery对象，并将后代元素添加到该DOM元素，则将该jQuery对象与（例如）一起使用.find将看到后代。这是因为父DOM元素已经在jQuery对象中了。例如，span在div我们已经从jQuery对象引用的s中添加一个：

$ div指向DOM中两个div的jQuery对象，现在有一个span

如果我们使用.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对象存储在某个地方的问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。