jQuery eq() 导致无限迭代

Question

当我试图在我的代码中总结事情时，我发现当我写这样的东西时：

var $elements = $('div');
for ( var i = 0, $element; $element = $elements.eq(i); i++ ) {
    $element.text( 'Hello' );
}

循环永远不会结束。我想知道，为什么会这样。如果我在条件内调用函数会导致错误，或者 jQuery 只是没有返回准确的数据，因此循环条件无法识别当前索引？

Answer 1

.eq() 方法总是返回一个 jQuery 对象。如果你指定一个不存在的索引，你会得到一个空的 jQuery 对象。但是任何对象都是真实的，所以即使在i 超过最后一个元素之后，你的循环条件也总是真实的。所以，无限循环。

你需要测试长度：

for ( var i = 0, $element; i < $elements.length && ($element = $elements.eq(i)) ; i++ )

但为什么不直接使用.each() 方法循环呢？

将当前元素分配为循环条件的模式确实适用于数组：

for ( var i = 0, element; element = anArray[i]; i++ ) 

假设所有元素都没有错误值，因为当i 达到an array.length 时，anArray[i] 将是undefined，这是错误的。

Answer 2

因为$ 和$elements.eq 将始终返回一个对象，即使没有与查询匹配。该对象的长度为 0，但它仍然是一个对象。对象是真实的值。

function log(msg) {
  document.querySelector('pre').innerText += msg + '\n';
}

log($('p').eq(0)); // First p element
log($('p').eq(1)); // Second p element
log($('p').eq(2)); // Third p element
log($('p').eq(3)); // No matching p element but look at what we get

if ($('p').eq(9001)) {
  log('Yup, still a truthy value');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>1</p>
<p>2</p>
<p>3</p>

<pre></pre>