Easier way to display day.js in multiple locations?-CodePudding

I'm currently studying web development and I'm hoping one of you guys may help.

I'm currently coding the mandatory weather app that everyone and his dog has made lol.

My problem is that on the homepage I have 3 cards displaying with 3 different cities. I want to display the current date underneath each city by using .

But to do it in 3 instances on the same I've had to use date,date2 and date3. Which I'm thinking a for loop or something similar could easily fix rather than defining it 3 times.

Any help appreciated! Thanks!

HTML

<section >
            <h2>  Cities</h2>
            <section >
              <div >
                <div >
                  <h3 >
                    London 
                  </h3>
                  <div >
                    <p>
                      <span id="date" >date </span> <br/>
                      Temp:<span id="temp"></span> 
                      Wind:<span id="wind"></span>
                      Humid:<span id="humid"></span>
                    </p>
                  </div>
                </div>
              </div>
              <div >
                <div >
                  <h3 >
                    Birmingham
                  </h3>
                  <div >
                    <p>
                      <span id="date2" >date </span> <br/>
                      Temp:<span id="temp"></span> 
                      Wind:<span id="wind"></span>
                      Humid:<span id="humid"></span>
                    </p>
                  </div>
                </div>
              </div>
              <div >
                <div >
                  <h3 >
                    Wolverhampton
                  </h3>
                  <div >
                    <p>
                      <span id="date3" >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 >
            <h2>Search</h2>
            <input  placeholder="Enter City" id="search">
            <ul >
                <li >An item</li>
                <li >A second item</li>
                <li >A third item</li>
                <li >A fourth item</li>
                <li >And a fifth one</li>
              </ul>
          </div>
          <div >
            <h2 >Results:</h2>
            <!--search results -->
          </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);

CodePudding user response：

To avoid defining the date elements individually, you can use a class instead of an ID for the date elements, and then use a loop to iterate over all elements with that class.

Here's how you could do it:

HTML:

<!-- Add a class "date" to each date element -->
<span >date </span>


let nowDate = now.format('D / M / YY')

// Use .each() to loop over all elements with the class "date"
$('.date').each(function() {
  // Use .text() to set the text of each date element to the current date
  $(this).text(nowDate);

}); This way, you don't have to define each element individually, and you can easily add or remove date elements without having to update your code.