$（「p」）。each（function（）{}）vs for（p在$（「p」）中返回不同值的段落數

Question

在下面的HTML代碼上運行這個jQuery代碼會返回不同的結果，I認爲他們應該返回相同的值

jQuery代碼：

var counter = 0; 
$("p").each(function(){ 
      counter++; 
}); 
console.log(counter); //returns 8 

//------------------------------------- 

counter = 0; 
var ps = $("p"); 
for(var p in ps){ 
    counter++; 
} 
console.log(counter); //returns 158 

HTML代碼：

<li class="article-item"> 
    <p>--</p> 
    <p> -- </p> 
</li> 
<li class="article-item"> 
    <p>--</p> 
    <p> -- </p> 
</li> 

<li class="article-item"> 
    <p>--</p> 
    <p> -- </p> 
</li> 
<li class="article-item"> 
    <p>--</p> 
    <p> -- </p> 
</li> 

Answer 1

for in循環將迭代對象的enumerable properties直到end of the prototype chain。所以在這種情況下不能使用它。您可以簡單地使用console.log($("p").length)來查找使用該選擇器抓取的元素的數量。

的理解最好的例子for-in循環是，

var x = [1,2]; 
for(var prop in x){ console.log(prop) } 
//This will print 0,1,length 

Answer 2

運行在HTML代碼如下這個jQuery代碼返回不同的結果，我認爲他們應該返回相同的值。

不！

雖然答案已經回答，但是這個。

$('p')是一個jQuery對象，它具有由jQuery本身添加的特定長度和一些其他屬性。

原生document.querySelectorAll('p')和$('p')之間的差異。兩個返回類似集合的數組，但jQuery的集合中添加了這麼多的特性，你可以看到在下面的代碼片段的區別：

$('pre').eq(0).html(JSON.stringify(document.querySelectorAll('p'), 0, 3)); 
 
$('pre').eq(1).html(JSON.stringify($('p'), 0, 3));

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

 
document.querySelectorAll('p'): 
 
<pre></pre> 
 

 
$('p'): 
 
<pre></pre> 
 

 
<ul> 
 
    <li class="article-item"> 
 
    <p>--</p> 
 
    <p>--</p> 
 
    </li> 
 
    <li class="article-item"> 
 
    <p>--</p> 
 
    <p>--</p> 
 
    </li> 
 

 
    <li class="article-item"> 
 
    <p>--</p> 
 
    <p>--</p> 
 
    </li> 
 
    <li class="article-item"> 
 
    <p>--</p> 
 
    <p>--</p> 
 
    </li> 
 
</ul>

所以，當你與for...in循環遍歷它遍歷$('p')對象集合的每個屬性。