Question

我有以下标记：

<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>

所以，基本上在每组li个元素之前，我希望data-date插入<li><h2>{{ data-date group name }}</h2></li>个$('li').each(function() { $(this).before('<li><h2>' + $(this).attr('data-date') + '</h2></li>'); });元素。

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

data-date

这不会定位具有相同{{1}}值的元素的组，它会以每个元素为目标。

所以是的，如果有人能帮忙解决这个问题，我们将非常感激。

Answer 1

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');
});

<强> Working Demo

Answer 2

如果您过滤它以获得第一次出现，您的代码将起作用：

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>');
});

jQuery，在项目之前插入日期

2 个答案: