如何根据包含的时间属性为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>");
}
});