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

Posted 2023-04-13

【中文标题】如何根据包含的时间属性将子标题添加到 div？

【英文标题】：How to prepend subheadlines to div based on contained time attribute?

【发布时间】：2021-05-18 16:19:07

【问题描述】：

我有一个给定的 html 结构（见下文）。我想实现这是按每个新月的日期标题分隔的。例如，3 月的所有日期都应该有一个副标题，而不是其他日期后面有自己的副标题。

有没有不需要特殊库的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>")
);

【问题讨论】：

是的，我已经包含了现有的代码。

【参考方案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>");
  
);