如何根据包含的时间属性将副标题添加到 div？

Question

我有一个给定的 HTML 结构（见下文）。我想实现每个新月份的日期标题分隔。例如，三月的所有日期都应该有一个副标题，而其他日期则有自己的副标题。

是否有不需要特殊库的 jQuery 解决方案？

<div class="events">
   <div class="event layout_upcoming current even first cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-03-18" class="date" itemprop="startDate">18.03.2021 – 26.03.2022</time>
      <p>Item 1</p>
   </div>
   <div class="event layout_upcoming current odd cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-04-23" class="date" itemprop="startDate">23.04.2021 – 08.05.2022</time>
      <p>Item 2</p>
   </div>
   <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-05-20" class="date" itemprop="startDate">20.05.2021 – 21.05.2021</time>
      <p>Item 3</p>
   </div>
   <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-05-27" class="date" itemprop="startDate">27.05.2021</time>
      <p>Item 4</p>
   </div>
   <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-06-10" class="date" itemprop="startDate">10.06.2021</time>
      <p>Item 5</p>
   </div>
   <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-07-08" class="date" itemprop="startDate">08.07.2021</time>
      <p>Item 6</p>
   </div>
   <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-11-10" class="date" itemprop="startDate">10.11.2021</time>
      <p>Item 7</p> 
   </div>
   <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-11-11" class="date" itemprop="startDate">11.11.2021</time>
      <p>Item 8</p> 
   </div>
</div>

我希望输出如下：

<div class="events">
    <div class="event layout_upcoming current even first cal_47" itemscope="" itemtype="http://schema.org/Event">
        <h3>March (03 or März)</h3>
        <time datetime="2021-03-18" class="date" itemprop="startDate">18.03.2021 – 26.03.2022</time>
        <p>Item 1</p>
    </div>
    <div class="event layout_upcoming current odd cal_47" itemscope="" itemtype="http://schema.org/Event">
        <h3>April (04)</h3>
        <time datetime="2021-04-23" class="date" itemprop="startDate">23.04.2021 – 08.05.2022</time>
        <p>Item 2</p>
    </div>
    <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
        <h3>May (05 or Mai)</h3>
        <time datetime="2021-05-20" class="date" itemprop="startDate">20.05.2021 – 21.05.2021</time>
        <p>Item 3</p>
    </div>
    <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
        <time datetime="2021-05-27" class="date" itemprop="startDate">27.05.2021</time>
        <p>Item 4</p>
    </div>
    <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
        <h3>June (06 or Juni)</h3>
        <time datetime="2021-06-10" class="date" itemprop="startDate">10.06.2021</time>
        <p>Item 5</p>
    </div>
    <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
        <h3>July (07 or Juli)</h3>
        <time datetime="2021-07-08" class="date" itemprop="startDate">08.07.2021</time>
        <p>Item 6</p>
    </div>
    <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
        <h3>Novembre (11 or November)</h3>
        <time datetime="2021-11-10" class="date" itemprop="startDate">10.11.2021</time>
        <p>Item 7</p>
    </div>
    <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
        <time datetime="2021-11-11" class="date" itemprop="startDate">11.11.2021</time>
        <p>Item 8</p>
    </div>
</div>

我的 jQuery 到目前为止：

$( ".event time" ).each(function() {
  var datetime = $(this).attr("datetime");
  const date = new Date(datetime);  
  const month = date.toLocaleString('default', { month: 'long' });
  const year = date.toLocaleString('default', { year: 'numeric' });  
  $(this).prepend("<h3>"+month+" "+year+"</h3>")
});

Answer 1

(function($){
    $('document').ready(function(){
        check_month = [];
        $( ".event time" ).each(function() {
          var datetime = $(this).attr("datetime");
          const date = new Date(datetime);
            const month = date.toLocaleString('default', { month: 'long' });
          const year = date.toLocaleString('default', { year: 'numeric' });
          if (check_month.indexOf(month+year) == -1)
          {
            check_month.push(month+year);
            $("<h3>"+month+" "+year+"</h3>").insertBefore($(this));
          }
        });
    });//ready
})(jQuery)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="events">
   <div class="event layout_upcoming current even first cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-03-18" class="date" itemprop="startDate">18.03.2021 – 26.03.2022</time>
      <p>Item 1</p>
   </div>
   <div class="event layout_upcoming current odd cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-04-23" class="date" itemprop="startDate">23.04.2021 – 08.05.2022</time>
      <p>Item 2</p>
   </div>
   <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-05-20" class="date" itemprop="startDate">20.05.2021 – 21.05.2021</time>
      <p>Item 3</p>
   </div>
   <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-05-27" class="date" itemprop="startDate">27.05.2021</time>
      <p>Item 4</p>
   </div>
   <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-06-10" class="date" itemprop="startDate">10.06.2021</time>
      <p>Item 5</p>
   </div>
   <div class="event layout_upcoming upcoming odd cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-07-08" class="date" itemprop="startDate">08.07.2021</time>
      <p>Item 6</p>
   </div>
   <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-11-10" class="date" itemprop="startDate">10.11.2021</time>
      <p>Item 7</p> 
   </div>
   <div class="event layout_upcoming upcoming even cal_47" itemscope="" itemtype="http://schema.org/Event">
      <time datetime="2021-11-11" class="date" itemprop="startDate">11.11.2021</time>
      <p>Item 8</p> 
   </div>
</div>

您是否建议将此用作解决方案？或者你会改进我的代码吗？

check_month = [];
$( ".event time" ).each(function() {
  var datetime = $(this).attr("datetime");
  const date = new Date(datetime);
    const month = date.toLocaleString('default', { month: 'long' });
  const year = date.toLocaleString('default', { year: 'numeric' });
  if (check_month.indexOf(month+year) == -1)
  {
    check_month.push(month+year);
    $(this).prepend("<h3>"+month+" "+year+"</h3>");
  }
});

如何根据包含的时间属性将副标题添加到 div？

How to prepend subheadlines to div based on contained time attribute?

html

jquery

text

date

prepend