如何更简洁地在多个位置使用day.js显示日期？

我正在学习Web开发，目前在开发一款天气应用。首页有3个展示不同城市的卡片，希望通过class="date"在每个城市下方显示当前日期，但现在不得不使用date、date2、date3三个ID分别处理，想通过循环之类的方法简化代码。

现有代码 #

HTML #

<section class="row">
    <h2>  Cities</h2>
    <section class="row">
        <div class="mb-2 col-xs-12 col-md-6 col-lg-4">
            <div class="card">
                <h3 class="card-header">
                    London 
                </h3>
                <div class="card-body">
                    <p>
                        <span id="date" class="date">date </span> <br/>
                        Temp:<span id="temp"></span> 
                        Wind:<span id="wind"></span>
                        Humid:<span id="humid"></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="mb-2 col-xs-12 col-md-6 col-lg-4">
            <div class="card">
                <h3 class="card-header">
                    Birmingham
                </h3>
                <div class="card-body">
                    <p>
                        <span id="date2" class="date">date </span> <br/>
                        Temp:<span id="temp"></span> 
                        Wind:<span id="wind"></span>
                        Humid:<span id="humid"></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="mb-2 col-xs-12 col-md-6 col-lg-4">
            <div class="card">
                <h3 class="card-header">
                    Wolverhampton
                </h3>
                <div class="card-body">
                    <p>
                        <span id="date3" class="date">date </span> <br/>
                        Temp:<span id="temp"></span> 
                        Wind:<span id="wind"></span>
                        Humid:<span id="humid"></span>
                    </p>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="col-xs-12 col-lg-3">
    <h2>Search</h2>
    <input class="Search col-12 border-radius pb-1" placeholder="Enter City" id="search">
    <ul class="list-group mb-2 pb-2">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
    </ul>
</div>
<div class="col-xs-9 col-lg-9">
    <h2 class="subtitle">Results:</h2>
    <!--search results class="results-item"-->
</div>
</section>

JavaScript/JQuery #

let nowDate = now.format('D / M / YY')
let date = $('#date')
let date2 = $('#date2')
let date3 = $('#date3')
date.text(nowDate);
date2.text(nowDate);
date3.text(nowDate);

优化方案 #

方案1：利用jQuery的批量选择与操作 #

jQuery的选择器支持直接选中所有拥有指定class的元素，并且它的方法（比如.text()）会自动遍历所有匹配的元素并执行操作，完全不需要手动循环：

const nowDate = now.format('D / M / YY');
// 直接选中所有.date类元素并设置文本
$('.date').text(nowDate);

甚至可以简化成一行（如果变量复用率不高的话）：

$('.date').text(now.format('D / M / YY'));

方案2：原生JavaScript实现（无需jQuery） #

如果后续考虑移除jQuery依赖，也可以用原生JS的querySelectorAll配合循环处理：

const nowDate = now.format('D / M / YY');
// 获取所有.date元素
const dateElements = document.querySelectorAll('.date');
// 遍历设置文本
dateElements.forEach(el => {
    el.textContent = nowDate;
});

另外，你HTML里的temp、wind、humid也存在重复ID的问题（ID必须是唯一的），后续处理这些数据时，建议也改用class或者基于卡片容器来查找子元素，避免ID冲突。

内容的提问来源于stack exchange，提问作者DieAgainAli