使用 JS 定位类名迭代

Posted 2023-05-09

【中文标题】使用 JS 定位类名迭代

【英文标题】：Targeting class name iterations with JS

【发布时间】：2011-06-14 17:06:53

【问题描述】：

我正在尝试将 JSON 数据解析为类名“slide_content”的特定迭代

要得到这样的东西：

slide_content[0]

但是 JS 没有提供getElementByClass() 选择器。

有问题的 API 数据在这里： Converting Straight JS to JQuery

干杯！ 迈尔斯

【问题讨论】：

好吧，“id”值确实需要在整个文档中是唯一的。因此，当您动态添加内容时，您不应该给元素“id”值（改用“class”值），或者在进行时合成唯一的“id”值。

如果我给它们类值，那么我不能直接定位它们，因为某些奇怪的原因 JS 支持 getElementByID 但不支持 getElementByClass ...我需要它们都具有相同的类才能使选项卡滑块函数，因此意味着使用类名，但类名不能通过 JS API 定位。

【参考方案1】：

较新的浏览器（IE9 及更高版本）have support for document.getElementsByClassName（具有讽刺意味的是，它的支持少于 querySelectorAll，但我离题了...），但这可能无法满足您的兼容性需求。在这种情况下，您可以使用类似这样的方法来获取类的节点数组。

var nodes = document.getElementsByTagName('*'),
    targetClass = 'myclass',
    result = [];

for(var i = 0, l = nodes.length; i < l; i++)
    if((nodes[i].className + ' ').indexOf(targetClass + ' ') !== -1)
        result.push(nodes[i]);
    

这不是getElementsByClassName 的精确副本，因为该函数返回一个NodeList，但对于大多数用途来说它应该足够接近。

【参考方案2】：

使用 jQuery。它允许您使用$('.someClass') 检索具有给定类名的所有元素。

如果由于某种原因您不能使用 jQuery 或其他 JS 库，只需使用 jQuery 也使用的 Sizzle 选择器引擎 - 它不是很多代码，因此您甚至可以将其复制并粘贴到项目的一个 JS 文件中（但不要不要那样做，这很丑:p)。但是既然你用 jquery 标记了你的问题，我假设你可以使用 jQuery...

【讨论】：

感谢 ThiefMaster - 是的，JQuery 绝对是一个选择，然后我需要对代码进行 JQueryifying 工作......