jQuery中的for循环插入div

Question

I am trying to insert a div that shows the Day within another div using jQuery. I HTML structure is as follows:

<div class="am-event-info">
 <div class="am-event-sub-info">
  <div class="am-event-sub-info-capacity"><img src=""> Capacity: 0 / 100</div>
 </div>
<div class="am-event-sub-info">
  <div><img src="">February 27th, 2021 11:30 am - 1:00 pm</div>
 </div>
</div>

<div class="am-event-info">
 <div class="am-event-sub-info">
  <div class="am-event-sub-info-capacity"><img src=""> Capacity: 0 / 100</div>
 </div>
<div class="am-event-sub-info">
  <div><img src="">February 28th, 2021 11:30 am - 1:00 pm</div>


 </div>
</div>

I am trying to create a loop that goes through each of the am-event-info divs, looks at the date and inserts another div within the am-event-info div that shows the day. eg first am-event-info would have Saturday, second would have Sunday etc.

I have the code that shows the day and it only works for the first instance with the for loop but it keeps reapeting it self within the first instance. What can i do to rectify this?

 var day = new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format( new Date( $(".am-event-info").forEach(function () { $(this).find('.am-event-sub-info:eq(1)').text().trim().split(' - ')[0].replace("th","") // only interested in the "February 27, 2021 11:30 am" part })) ) document.querySelector('.am-event-sub-info').innerHTML += '<div class="day">'+day+'</div>';

 .am-event-info { padding: 10px; border: 1xp solid white; background: #c5c5c5; margin: 10px; }.day { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="am-events-booking"> <div class="am-event-info"> <div class="am-event-sub-info"> <div class="am-event-sub-info-capacity"><img src=""> Capacity: 0 / 100</div> </div> <div class="am-event-sub-info"> <div><img src="">February 27th, 2021 11:30 am - 1:00 pm</div> </div> </div> <div class="am-event-info"> <div class="am-event-sub-info"> <div class="am-event-sub-info-capacity"><img src=""> Capacity: 0 / 100</div> </div> <div class="am-event-sub-info"> <div><img src="">February 28th, 2021 11:30 am - 1:00 pm</div> </div> </div> <div class="am-event-info"> <div class="am-event-sub-info"> <div class="am-event-sub-info-capacity"><img src=""> Capacity: 0 / 100</div> </div> <div class="am-event-sub-info"> <div><img src="">March 1st, 2021 11:30 am - 1:00 pm</div> </div> </div> </div>

Answer 1

You need to loop, you are only acting on the first index

 $(".am-event-info").each(function() { var subInfo = $(this); var timeString = subInfo.find('.am-event-sub-info:eq(1)').text().trim().split(' - ')[0].replace(/(th|st|nd|rd),/, ","); var date = new Date(timeString); var day = new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(date); subInfo.append('<div class="day">' + day + '</div>'); });

 .am-event-info { padding: 10px; border: 1xp solid white; background: #c5c5c5; margin: 10px; }.day { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="am-events-booking"> <div class="am-event-info"> <div class="am-event-sub-info"> <div class="am-event-sub-info-capacity"><img src=""> Capacity: 0 / 100</div> </div> <div class="am-event-sub-info"> <div><img src="">February 27th, 2021 11:30 am - 1:00 pm</div> </div> </div> <div class="am-event-info"> <div class="am-event-sub-info"> <div class="am-event-sub-info-capacity"><img src=""> Capacity: 0 / 100</div> </div> <div class="am-event-sub-info"> <div><img src="">February 28th, 2021 11:30 am - 1:00 pm</div> </div> </div> <div class="am-event-info"> <div class="am-event-sub-info"> <div class="am-event-sub-info-capacity"><img src=""> Capacity: 0 / 100</div> </div> <div class="am-event-sub-info"> <div><img src="">March 1st, 2021 11:30 am - 1:00 pm</div> </div> </div> </div>