Question

在下面的HTML代码上运行这个jQuery代码会返回不同的结果，我认为它们应该返回相同的值。

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在集合中添加了很多属性，你可以看到代码片段的不同之处下面：

＆＃13;

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

＆＃13;

<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>

＆＃13;

因此，当您使用for...in循环进行迭代时，它会迭代$('p')对象集合的每个属性。

$（＆＃34; p＆＃34;）。each（function（）{}）vs for（p in $（＆＃34; p＆＃34;）返回不同的段数值

2 个答案: