为什么jQuery each循环在每次迭代中获取所有迭代的所有元素？

问题描述

为什么该脚本没有在每次迭代中获取H3，而是每次都获取所有迭代中的所有H3？！

JS：

            $('a.grid-box').each(function(index){
                $( '.meta-info h3');
            });

HTML：

<div class="row">
      <a class="grid-box" href="">
        <div class="links-icons meta-info">
          <h3>Title 1</h3>
        </div>
      </a>

      <a class="grid-box" href="">
        <div class="links-icons meta-info">
          <h3>Title 2</h3>
        </div>
      </a>
etc...
</div>

解决方法

因为选择器未引用a.grid-box迭代上下文，所以全局搜索也是如此。

更改

$('a.grid-box').each(function(index){
  $('.meta-info h3');
});

到

$('a.grid-box').each(function(index){
  $(this).find('.meta-info h3');
});

$('a.grid-box').each(function(index) {
  var h3 = $(this).find('.meta-info h3');
  console.log(h3.length,h3.text())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <a class="grid-box" href="">
    <div class="links-icons meta-info">
      <h3>Title 1</h3>
    </div>
  </a>

  <a class="grid-box" href="">
    <div class="links-icons meta-info">
      <h3>Title 2</h3>
    </div>
  </a>
  etc...
</div>

还要注意原始代码中的;.错字。