Group divs by attribute

Question

Based on this SO I try to group divs by its div attribute "messsage-id". So all divs with the same "message-id" should be wrapped by a div with class name group.

a
a
a
a
a

But I dont get it to work with attributes instead of class names. Here is what I tried:

var groups = {};
$('.day').each(function () {
    var className = this.getAttribute("message-id").match(/(day\d+)/)[1],
        $group = groups[className];
    if (!$group) {
        $group = $('', {
            'class': 'group'
        }).insertAfter(this);
        groups[className] = $group;
    }
    $group.append(this);
})

Here is the Fiddle

user_3324058 · Answer

You were on the right path with the getAttribute function but don't need the use the match function in your code since getAttribute already returns the id for your groups. Also, your $('.day') is not targeting the right class for your loop, it should be targeting $('.message') in your example.

var groups = {};
$('.message').each(function () { 
    var className = this.getAttribute("message-id"),
    $group = groups[className];
    if (!$group) {
        $group = $('', {
            'class': 'group'
        }).insertAfter(this);
        groups[className] = $group;
    }
    $group.append(this);
})

.group {
    border: 1px solid red;
    margin-bottom: 5px;
}


a
a
a
a
a

Group divs by attribute

1 Answers