Jquery - 获取第 n 个元素答案

【问题标题】：Jquery - Get xth elementJquery - 获取第 n 个元素
【发布时间】：2010-10-16 18:37:52
【问题描述】：

例如，我有一个带有 id 的 div（比如说“the_div”）。这个 div 包含一个无序列表，这个列表中有 5 个项目。

我如何将一个类添加到第三个列表项，而没有任何列表项具有附加到它们的类？

编辑：更好的是，我如何将列表项文本更改为等于它的数字元素？

谢谢。

【问题讨论】：

【解决方案1】：

对于你的第一个问题，你可以使用eq，它是基于0的：

$('ul li', '#thediv').eq(2).addClass('whatever'); // add class to 3rd item

对于第二个问题，您可以使用each 遍历所有列表项。回调函数传递一个包含集合中当前元素索引的参数：

$('ul li', '#thediv').each(function(i) {
    $(this).text(i); // update each list item with its index, 0 based.
});

【讨论】：

我会说 .text(i) 而不是 .html(i)。 +1 虽然。
嗯，jQuery 显然已经算出来了，但重点是。已编辑。
嗯。阅读文档，html() 和 text() 之间的唯一区别是 text() 转义 HTML。这显然在这里无关紧要。关于何时使用其中一种，是否有一些“最佳实践”？我觉得 html() 可能主要用于 div，但这只是一种预感。

【解决方案2】：

或者……

$('#the_div ul li:eq(2)').addClass('className');

您可以将选择器组合在一起 - 如果您愿意:)

【讨论】：