jquery - How to group dynamically generated content based on similar content -
i have dynamically generated page varying number of items (div.item). each item has inner div class "date". items ordered ascending order db based on date value. since page content taken db there may 10 items same date, next 3 share date, next x may share date, , on.
based on content of div.date want wrap items similar dates in div.group. have preferred doing direct on php code, i've inherited large messy project no documentation , option temporary. current simplified structure below:
<div class="item"> <div class="date">04-06-2012</div> <div class="other-content">other content</div> </div> <div class="item"> // grouped 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
this group items date, , append div.group elements 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 need append });
Comments
Post a Comment