使用Javascript将类名相同的元素放入数组并弹出。

Question

如何获取网页上所有具有特定类名的元素并将它们放入一个数组中？然后我想把该数组的内容放在弹出框中。

如何将这些元素的ID放入数组中？

- OOProg

Answer 1

如果您的浏览器支持 getElementsByClassName，请使用它，否则可以使用网络上提供的许多跨浏览器实现方式之一。

原生状态下，您可以这样获取它们：

var elements = document.getElementsByClassName('nameOfClassHere');

这将返回一个类似于数组的对象，您可以像在数组中一样遍历元素，但不能在其上使用数组方法。

如果您正在使用像jQuery或MooTools这样的库，那么这个任务对您来说会更简单。在jQuery中，要获取所有具有类名“myClass”的元素，并将它们的文本内容合并为一个字符串，请使用以下代码：

var combinedText = $('.myClass').text();

使用jQuery将每个匹配元素的id存入数组中：

```javascript var ids = $('selector').map(function() { return this.id; }).get(); ```

其中，`selector`是要匹配的选择器。

var arrayOfIDs = $('.myClass').map(function() { return this.id; }).get();

如果使用MooTools，你可以使用以下代码获取具有所需类的每个元素的文本内容数组：

var texts = $$('.myClass').get('text');

将每个匹配元素的ID存储到一个数组中，如下所示:

var arrayOfIDs = $$('.myClass').get('id');

- Anurag

---

要将其转换为数组，您可以执行以下操作：elements = Array.prototype.slice.call(elements, 0); - Matthew Flaschen

+1 是为了彻底性和两个库中的示例，并指出 getElementsByClassName 在每个浏览器中都不起作用。 - karim79

在IE <= 8上转换NodeList不起作用，但在这种情况下并不重要，因为getElementsByClassName也不支持这些IE版本。但是对于其他方法（例如getElementsByTagName），将无法工作，并且规范提到：“是否可以成功地将'slice'函数应用于宿主对象取决于实现。” - Christian C. Salvadó

@CMS 我有一种预感，IE 在这里会有问题，所以感谢您的充分披露 :). “实现相关”在这里和其他任何使用此短语的地方都有非常具体的含义 - IE 不支持它 :D - Anurag