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

Question

为什么这个脚本没有在每次迭代中获取 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>

Answer 1

因为您的选择器没有引用 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>

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