如何解决如何根据包含的时间属性将副标题添加到 div?
我有一个给定的 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>")
});
解决方法
(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>");
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。