JavaScript / jQuery - как найти первый из каждого неопределенного класса в родительском div

Question

JavaScript / jQuery - как найти первый из каждого неопределенного класса в родительском div

0

Я извлекаю данные из списка 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?

Godge 18 сен. 2013, в 12:17

Источник

Теги:

javascript

jquery

html

sharepoint

spservices

2 ответа

0

Вместо использования $ ('. 07-2013') в вашей функции вы можете обратиться к $ (". Child"), который я нашел во всех ваших div.

И связанный с текстом, который будет использоваться в этом div, вы можете сделать скрипт, чтобы вернуть вам имя месяца, соответствующее числу, и добавить его к году в этом DIV.

Ganesh Pandhere 18 сен. 2013, в 07:01

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-09-18T07-12-00.000Z

Пытаться

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

Демо: скрипка

jsfiddle.net/D8CxT/2 только для первого элемента класса
Спасибо, Арун, твой сценарий был близок, но у А. Вольфа есть место !!! Спасибо А. Вольф
@ A.Wolff в этом случае jsfiddle.net/arunpjohny/JjURY/1 будет лучше, я думаю
@ArunPJohny это то, что я искал, как ты это сделаешь ?! Спасибо Арун!