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

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>

还要注意原始代码中的;.拼写错误。