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

演示：小提琴

Answer 2

与其在您的函数中使用 $（'.07-2013'），不如参考我在所有div 中找到的 $（".child"）。

与该div 中使用的文本相关，您可以制作一个脚本来返回与数字对应的月份名称，并在该 DIV 中按年份附加它。