JavaScript/jQuery - 如何在父div中找到每个未确定类的第一个

Question

我正在使用SPServices从SharePoint列表中提取数据.列表中的每一行都将插入到容器div中,其中的类与列表中的月份和年份数据相对应,如下所示:

<div class="container">
  <div class="child 07-2013">
    <p>Some content</p>
  </div>
  <div class="child 06-2013">
    <p>Some content</p>
  </div>
  <div class="child 06-2013">
    <p>Some content</p>
  </div>
  <div class="child 11-2012">
    <p>Some content</p>
  </div>
  <div class="child 11-2012">
    <p>Some content</p>
  </div>
</div>

我需要编写一个脚本(最好是jQuery而不是正确的JavaScript,因为我对它更熟悉),它会找到每个类的第一个并在它之前添加另一个div,这样它最终会像这样:

<div class="container">
  <div class="header">July 2013</div>
  <div class="child 07-2013">
    <p>Some content</p>
  </div>
  <div class="header">June 2013</div>
  <div class="child 06-2013">
    <p>Some content</p>
  </div>
  <div class="child 06-2013">
    <p>Some content</p>
  </div>
  <div class="header">November 2012</div>
  <div class="child 11-2012">
    <p>Some content</p>
  </div>
  <div class="child 11-2012">
    <p>Some content</p>
  </div>
</div>

我知道我可以这样写:

function addHeaders(){
  $('.07-2013').before('<div class="header">July 2013</div>');
  $('.06-2013').before('<div class="header">June 2013</div>');
  etc...
}

但问题是我不想在脚本中定义每个类,因为数据将不断添加到SharePoint列表中,我希望将来证明它,以便作者可以更新SharePoint列表并且脚本将处理数据自动.

那么,有没有办法模糊地找到容器div中每个类的第一个实例？

Answer 1

尝试

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], flag = {}
$('.container > .child').each(function () {
    var month = this.className.match(/(\d{2})-(\d{4})/);
    if(flag[month[0]]){
        return;
    }
    flag[month[0]] = true;
    $(this).before('<div class="header">' + months[month[1] - 1] + ' ' + month[2] + '</div>')
})

演示:小提琴