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

演示：Fiddle

Answer 2

不是在你的函数中使用$（'。07-2013'），你可以参考我在你所有的div中找到的$（“。child”）。

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

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

2 个答案: