Question

我有以下标记，其中包含10个pre个元素，其中包含indent类：

<pre class="indent"></pre>
<pre class="indent"></pre>
<pre class="indent"></pre>
<pre class="indent"></pre>
<pre class="indent"></pre>
<pre class="indent"></pre>
<pre class="indent"></pre>
<pre class="indent"></pre>
<pre class="indent"></pre>
<pre class="indent"></pre>

我正在使用以下jQuery .each()函数来遍历每个元素：

$(function(){    
    $.each(".indent", function(index){
       alert(index); 
    });    
});

我希望看到10个警报，但我只看到7个

-- See Fiddle --

但是，这与预期的$(".indent").each()：

一致

$(function(){    
    $(".indent").each(function(index){
       alert(index); 
    });    
});

-- See Fiddle --

查看$.each()文档，我理解是有区别的：

$ .each（）函数与$（selector）.each（）不同，即用于独占迭代jQuery对象。

但我不明白为什么在这种情况下，它不会遍历所有元素。

为什么会这样？

Answer 1

$.each(".indent", function(index){

不会遍历$('.indent')的元素，而是遍历长度为7个字符的".indent"字符串。

请参阅reference

基于jQuery source code的更详细说明：

jQuery首先检查第一个参数obj（这里是你的字符串）是否有一个length：

var ...
        length = obj.length,
        isObj = length === undefined || jQuery.isFunction( obj );

您的字符串中包含length（而不是函数），isObj为false。

在这种情况下，执行以下代码：

for ( ; i < length; ) {
    if ( callback.call( obj[ i ], i, obj[ i++ ] ) === false ) {
        break;
    }
}

因此，给定函数f，以下代码

$.each(".indent", f);

相当于

for (var i=0; i<".indent".length; i++) {
    var letter = ".indent"[i];
    f.call(letter, i, letter);
}

（您可以使用var f = function(i,v){console.log(v)};记录字母，或使用call提醒var f = function(){console.log(this)};的一个细微之处

Answer 2

您正在遍历字符串，您应该将对象或数组传递给$.each方法：

$(function(){    
    $.each($(".indent"), function(index){
       alert(index);
    });    
});

Answer 3

$。每个迭代一组数据。由于传递了一个包含7个字符的字符串，因此它将针对每个字符进行迭代。请参阅使用示例：

$.each([52, 97], function(index, value) { 
  alert(index + ': ' + value); 
});

为什么$ .each（）不遍历每个项目？

3 个答案: