jQuery，在项目之前插入日期

jQuery, Insert Date Before Item

本文关键字：插入 日期 项目 jQuery      更新时间：2023-09-26

我有以下标记：

<ul>
  <li data-date="May 2014">Content</li>
  <li data-date="May 2014">Content</li>
  <li data-date="May 2014">Content</li>
  <li data-date="August 2014">Content</li>
  <li data-date="August 2014">Content</li>
  <li data-date="November 2014">Content</li>
  <li data-date="November 2014">Content</li>
  <li data-date="November 2014">Content</li>
  <li data-date="November 2014">Content</li>
</ul>

我想要输出的是：

<ul>
  <li><h2>May 2014</h2></li>
  <li data-date="May 2014">Content</li>
  <li data-date="May 2014">Content</li>
  <li data-date="May 2014">Content</li>
  <li><h2>August 2014</h2></li>
  <li data-date="August 2014">Content</li>
  <li data-date="August 2014">Content</li>
  <li><h2>November 2014</h2></li>
  <li data-date="November 2014">Content</li>
  <li data-date="November 2014">Content</li>
  <li data-date="November 2014">Content</li>
  <li data-date="November 2014">Content</li>
</ul>

因此，基本上，在每一组包含相同data-date值的li元素之前，我希望插入<li><h2>{{ data-date group name }}</h2></li>。

我尝试使用以下内容，但失败了：

$('li').each(function() {
  $(this).before('<li><h2>' + $(this).attr('data-date') + '</h2></li>');
});

这并不针对具有相同data-date值的元素的组，而是针对每个单独的元素。

所以，是的，如果有人能在这方面提供帮助，我们将不胜感激。

var previousDataDate;
$('li').each(function() {
    if (previousDataDate != $(this).attr('data-date')) {
        $(this).before('<li><h2>' + $(this).attr('data-date') + '</h2></li>');
    }
    previousDataDate = $(this).attr('data-date');
});

工作演示

如果您对代码进行过滤以获得第一个结果，那么您的代码就会工作：

var $firstDates = $('li').filter(function() { 
  return $(this).data("date") != $(this).prev().data("date");
});
$firstDates.each(function() {
  $(this).before('<li><h2>' + $(this).attr('data-date') + '</h2></li>');
});
相关文章：