访问DOM中具有相同名称的多个项目[重复]

Posted 2023-03-05

【中文标题】访问DOM中具有相同名称的多个项目[重复]

【英文标题】：Access multiple items with same name in DOM [duplicate]

【发布时间】：2015-07-28 09:45:25

【问题描述】：

使用 Web 开发者控制台，我可以像这样从 Web 控制台访问特定类的第一项的内容：

$(".license-box pre").text();

但是，如果有多个名为“pre”的对象是“license-box”类的成员，该怎么办？如何访问实例 1、2、n 等？

我不是在问如何遍历类成员列表。我在问如何访问列表的第 N 个成员，这是一个不同的问题。这不是标记帖子的副本。它是下面链接的 Felix King 帖子的副本，因此应正确重新标记以指向 Felix 的项目。

解决方案如下：使用.eq() 方法。

【问题讨论】：

什么是$？ jQuery？您可能想通读初学者教程。

@squint OP 拥有近 5000 个代表

@Pointy：我应该向他表示祝贺吗？还是我应该把他的 5k 代表当作他应该知道他应该先做基础研究？

什么 LOL，是的，也许 OP 对其他语言真的很好，但是是的，这是非常基本的。

现在最好复制：***.com/q/9231096

【参考方案1】：

您可以使用.each() 遍历项目集合：

$(".license-box pre").each(function() 
  console.log("this <pre> contains: " + $(this).text());
);

.each() 的回调传递了索引，这将允许您执行类似仅对偶数索引元素执行的操作：

$(".license-box pre").each(function(index) 
  if ((index & 1) === 0)
    console.log("even <pre>: " + $(this).text());
);

如果你知道自己想要哪一个，可以使用.eq()：

var third = $(".license-box pre").eq(3);

您可以在选择器本身中做很多事情。如果你想对每 3 个 <pre> 做一些事情，你可以这样做：

$(".license-box pre:nth-child(3n)").each(function() 
  console.log($(this).text());
);

（当<pre> 元素是“license-box”容器的直接子元素时，这里的nth-child() 选择器是有意义的，因为语义与每个元素的兄弟关系有关。）

【讨论】：

我需要的是 .eq 方法：$(".license-box pre").eq(1).text();

@TylerDurden 你也可以$(".license-box pre:eq(1)").text()

使用.eq(1) 避免了非标准选择器的恶作剧。

@sixfingeredman 是的，确实如此

【参考方案2】：

像这样？ .each

var res = [];

$(".license-box pre").each(function()
    res.push($(this).text()); // or alert($(this).text());
);

console.log(res);

现在，如果您想要 nth 实例的文本，只需执行以下操作：

alert(res[n - 1]);