Я извлекаю данные из списка SharePoint с помощью SPServices. Каждая строка из списка будет помещена в контейнер 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?
Пытаться
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>')
})
Демо: скрипка
Вместо использования $ ('. 07-2013') в вашей функции вы можете обратиться к $ (". Child"), который я нашел во всех ваших div.
И связанный с текстом, который будет использоваться в этом div, вы можете сделать скрипт, чтобы вернуть вам имя месяца, соответствующее числу, и добавить его к году в этом DIV.