如何对具有类的每个元素执行js函数[重复]答案

【问题标题】：How to perform a js function on every element with a class [duplicate]如何对具有类的每个元素执行js函数[重复]
【发布时间】：2020-08-11 20:59:38
【问题描述】：

我编写了一个脚本，该脚本从以下格式设置的跨度中获取时间：“2020 年 10 月 29 日 9:00 am GMT”，并将其交换为用户时区中的计算日期。

问题是代码仅适用于第一个跨度，我是 javascript 新手，我无法思考如何创建 foreach 循环。有人可以帮我调整我的脚本以便能够遍历提供的 html 吗？提前致谢。

JavaScript：

var timestamp = document.getElementById('timestamp'),
        t         = new Date(timestamp.innerHTML),
        hours     = t.getHours(), 
        min       = t.getMinutes() + '', 
        pm        = false,
        months    = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    if(hours > 11){
       hours = hours - 12;
       pm = true;
    }

    if(hours == 0) hours = 12;
    if(min.length == 1) min = '0' + min;

    timestamp.innerHTML = months[t.getMonth()] + ' ' + t.getDate() + ', ' + t.getFullYear() + ' ' + hours + ':' + min + ' ' + (pm ? 'pm' : 'am') + ', ' + Intl.DateTimeFormat().resolvedOptions().timeZone + ' time';

HTML：

<span class="timestamp">October 29, 2020 9:00 am GMT</span><br>
<span class="timestamp">October 29, 2020 2:00 am GMT</span><br>
<span class="timestamp">October 29, 2020 4:00 am GMT</span><br>
<span class="timestamp">October 30, 2020 3:00 am GMT</span><br>
<span class="timestamp">October 28, 2020 7:00 am GMT</span><br>
<span class="timestamp">October 29, 2020 8:00 am GMT</span><br>

【问题讨论】：

标题说类，但代码是id....所以添加一个类，选择该类的所有元素，遍历集合，运行代码。
ID 必须是唯一的。使用一个类，然后你可以用这个类遍历所有元素。

标签： javascript jquery datetime foreach timezone

【解决方案1】：

您应该给所有元素一个“时间戳”类，因为 ID 是唯一的。然后就可以使用document.querySelectorAll获取所有元素了。

document.querySelectorAll('.timestamp').forEach(timestamp=>{
    let    t         = new Date(timestamp.innerHTML),
        hours     = t.getHours(), 
        min       = t.getMinutes() + '', 
        pm        = false,
        months    = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    if(hours > 11){
       hours = hours - 12;
       pm = true;
    }

    if(hours == 0) hours = 12;
    if(min.length == 1) min = '0' + min;

    timestamp.innerHTML = months[t.getMonth()] + ' ' + t.getDate() + ', ' + t.getFullYear() + ' ' + hours + ':' + min + ' ' + (pm ? 'pm' : 'am') + ', ' + Intl.DateTimeFormat().resolvedOptions().timeZone + ' time';
});

【讨论】：

谢谢，我刚刚复制了带有 id 的代码，我知道它们不应该被多次使用，我尝试了 classes 和 getElementsByClassName()，但无法实现我想要的。您的代码有效，谢谢！

【解决方案2】：

id 必须是唯一的，最好使用时间戳作为类名。所以你可以通过document.getElementsByClassName获得所有这些。

let timestamps = document.getElementsByClassName('timestamp');
//console.log(timestamps, timestamps.length);
for (let i=0; i<timestamps.length; i++) {
    let    t         = new Date(timestamps[i].innerHTML),
        hours     = t.getHours(), 
        min       = t.getMinutes() + '', 
        pm        = false,
        months    = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    if(hours > 11){
       hours = hours - 12;
       pm = true;
    }

    if(hours == 0) hours = 12;
    if(min.length == 1) min = '0' + min;

    timestamps[i].innerHTML = months[t.getMonth()] + ' ' + t.getDate() + ', ' + t.getFullYear() + ' ' + hours + ':' + min + ' ' + (pm ? 'pm' : 'am') + ', ' + Intl.DateTimeFormat().resolvedOptions().timeZone + ' time';
}

<span class="timestamp">October 29, 2020 9:00 am GMT</span><br>
<span class="timestamp">October 29, 2020 2:00 am GMT</span><br>
<span class="timestamp">October 29, 2020 4:00 am GMT</span><br>
<span class="timestamp">October 30, 2020 3:00 am GMT</span><br>
<span class="timestamp">October 28, 2020 7:00 am GMT</span><br>
<span class="timestamp">October 29, 2020 8:00 am GMT</span><br>

【讨论】：