javascript - Jquery 通过索引访问每个列表项

Question

我正在关注 Jquery 的初学者视频教程，并且刚刚完成了以下代码:(在 .ready() 内)

$('ul li ').each(function(e){

    $this().css{background' ,'red'}
    $this().append(e);

});

现在e打印每个li索引，有人可以解释一下它如何获取每个项目的索引，因为它不是循环。

Answer 1

嗯，.each() 函数是一个循环。它几乎字面意思是“对于每一个名为‘ul li’的项目，做一些事情。”

括号内的字母“e”是您的实际索引号。当您使用 .each 循环时，该函数会收集它正在查看的所有内容的数量，然后继续前进，直到不再有为止。

要简单地显示索引号，您可以说:

$('ul li').each(function(i){  //I like to use the letter 'i' which more literally stands for 'index'
    console.log(i);
});

这将在您的控制台中显示为:

0
1
2
3
4
5

假设您有其中六个元素。

现在，您对 $this 的使用没有任何意义。正确使用它时，它会写为 $(this) ，这意味着“这个元素”，因为我们处于一个遍历每个列表元素的函数中，它将采用当前正在查看的列表元素，然后做你想做的事。

如果您希望所有列表元素的背景颜色为红色(就像您想要的那样)，您可以编写:

$('ul li').each(function(i){  
    $(this).css({"background": "red"});
});

我不确定您要使用 .append 函数做什么。通过这样做，您实际上是在为每个列表元素添加一个列表元素到列表元素中!

您能解释一下您想要实现的目标吗？

更新正如您的标题所示“通过索引访问每个列表项”，如果您想访问特定列表项而不是全部列表项，则可以使用函数 .eq()。假设您有 6 个列表元素，并且希望第四个元素具有红色背景。您所要做的就是:

$('ul li').eq(3).css({"background":"red"});

请记住，索引号从零开始，因此第四个索引号为#3。 (但是当然，这在 CSS 中会更快更简单!)