Append()在if语句中不起作用，if语句在.each循环jquery中

Question

我需要在ul-li中的第4个元素后面追加一些文本，所以我使用了append函数。问题是如果语句在.each函数内部不起作用，它会在每个li元素之前追加。

这是HTML标记

<ul class="gallery">
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li> 
</ul>

这是jquery代码

$('.gallery li').each(function( index ) {
var count = 3;
if( index == count){
$( ".gallery li a" ).append('<span>Learn More</span>');
}
});

问题是什么？还有其他方法可以做到这一点吗？

Answer 1

如果您的目标是针对第四个元素，那么您不需要循环。您可以使用:eq()直接选择它。请注意，索引是基于零的，因此第四个元素是索引3。试试这个：

$('.gallery li:eq(3) a').append(' <span>Learn More</span>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="gallery">
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
</ul>

Answer 2

您可能只想附加到当前正在迭代的列表项：

$('.gallery li').each(function(index) {
var count = 3;
if (index == count) {
$(this).find('a').append('<span> Learn More</span>');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="gallery">
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
<li><a href="#">Some Text</a></li>
</ul>