Question

I have a dynamically generated page with varying number of items (div.item). Each item has an inner div with class “date”. The items are ordered by ascending order from the DB based on the date value. Since this page content taken from the DB there may be 10 items with the same date, then the next 3 will share a date, then the next X may share another date, and so on.

Based on the content of div.date I want to wrap all items with similar dates in a div.group. I would have preferred doing this direct on the PHP code, but I’ve inherited a large messy project with no documentation and this option is only temporary. The current simplified structure is below:

<div class="item">
  <div class="date">04-06-2012</div>
  <div class="other-content">Other Content</div>
</div>
<div class="item"> // To be grouped with above
  <div class="date">04-06-2012</div> 
  <div class="other-content">Other Content</div>
</div>
...
<div class="item"> // In it's own group
  <div class="date">08-06-2012</div>
  <div class="other-content">Other Content</div> 
</div>
...

Thanks

Answer 1

This will group all items by date, and append the div.group elements to body.

var groups={}
$('div.item').each(function() {
    var dt = $(this).find ( '.date' ).text() 
    groups[dt] = groups[dt] || []
    groups[dt].push (this)
});
$.each (groups, function(k, v) {
    var group = $('<div/>').addClass('group')
    $.each (v, function(k, item) {
        $(item).detach().appendTo (group)
    });
    group.appendTo ( 'body' )  //or wherever you need to append it
});