Select and warp group of elements in Jquery

Question

I got the following code:

<div class="timeline">
    <div class="timeslice" data-tid="360"></div>
    <div class="timeslice" data-tid="360"></div>
    <div class="timeslice" data-tid="360"></div>
    <div class="empty-timeslice"></div>
    <div class="timeslice" data-tid="360"></div>
    <div class="timeslice" data-tid="360"></div>
    <div class="empty-timeslice"></div>
    <div class="empty-timeslice"></div>
    <div class="timeslice" data-tid="360"></div>
    <div class="timeslice" data-tid="360"></div>
    <div class="timeslice" data-tid="361"></div>
    <div class="timeslice" data-tid="361"></div>
</div>

I want to warp the divs by group of same attribute and in the same "group", like so:

<div class="timeline">
    <div class="warp">
        <div class="timeslice" data-tid="360"></div>
        <div class="timeslice" data-tid="360"></div>
        <div class="timeslice" data-tid="360"></div>
   </div>
        <div class="empty-timeslice"></div>
   </div>
    <div class="warp">
        <div class="timeslice" data-tid="360"></div>
        <div class="timeslice" data-tid="360"></div>
   </div>
    <div class="empty-timeslice"></div>
    <div class="empty-timeslice"></div>
    <div class="warp">
        <div class="timeslice" data-tid="360"></div>
        <div class="timeslice" data-tid="360"></div>
   </div>
    <div class="warp">
        <div class="timeslice" data-tid="361"></div>
        <div class="timeslice" data-tid="361"></div>
   </div>
</div>

In my code, I am able to get each value of data-tid, like so:

function warpAroundTimeslice(arrayOfTid){
   ...
}

Any ideas?

if I put in another way I am trying to select the elements with same class/attribute that are next to each other in order to warp them

I hope my question makes sense, if not please let me know! Thanks a lot!

---

Thanks to Leonardo Delfino, here is the final code, which works for me:

 var group = [];    
 var groupCount = 0;
 var group_attr_value = '360';

 $(".timeline > div").each(function(i, item) {
  var $item = $(item);
  if($item.attr('data-tid') == group_attr_value) {
       group.push(item);
  };

  if($item.next().attr('data-tid') != group_attr_value) {
       $(group).wrapAll("<div class='wrapper'> Comment: " + groupCount + "</div>");
       group = [];
       groupCount++;        
  }       
  });

Answer 1

You can do this:

var group = [];    
var groupCount = 0;
var group_class = "timeslice";

$(".timeline > div").each(function(i, item) {
    var $item = $(item);
    if($item.hasClass(group_class)) {
        group.push(item);
    };

    if(group.length > 0 && !$item.next().hasClass(group_class)) {        
        $(group).wrapAll("<div class='wrap'> Group: " + groupCount + "</div>");
        group = [];
        groupCount++;        
    }       
});   

Check this fiddle: http://jsfiddle.net/wv9W7/3/

Answer 2

You could go about this several ways. If you don't mind the elements being wrapped individually (instead of grouped like in your example), then a simple solution would be:

Demo Fiddle

JS:

$('.timeslice').wrap('<div class="wrap">');