title: Jquery finding set of element by attribute and wrapping them in a new div
body: <p>I have a bunch of <code>&lt;ul&gt;</code>s that have the attribute data-year.  I want to wrap the data-year attributes with the same value in a div like so: <code>&lt;div class="year"&gt;&lt;div&gt;</code></p>
  
  <p>before:</p>
  
  <pre><code>&lt;div class="projectLists"&gt;
      &lt;ul data-year="2013"&gt;
          &lt;li&gt;items ...   
      &lt;/ul&gt;
      &lt;ul data-year="2013"&gt;
          &lt;li&gt;items...
      &lt;/ul&gt;
      &lt;ul data-year="2012"&gt;
          &lt;li&gt;items ...
      &lt;/ul&gt;
      &lt;ul data-year="2012"&gt;
          &lt;li&gt;items ...
      &lt;/ul&gt;
      &lt;ul data-year="2011"&gt;
          &lt;li&gt;items...
      &lt;/ul&gt;
      &lt;ul data-year="2011"&gt;
          &lt;li&gt;items...
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>after should look like this:</p>
  
  <pre><code>&lt;div class="projectLists"&gt;
  &lt;div class="year"&gt;
      &lt;ul data-year="2013"&gt;
          &lt;li&gt;items ...
      &lt;/ul&gt;
      &lt;ul data-year="2013"&gt;
          &lt;li&gt;items...
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="year"&gt;
      &lt;ul data-year="2012"&gt;
          &lt;li&gt;items ...
      &lt;/ul&gt;
      &lt;ul data-year="2012"&gt;
          &lt;li&gt;items...
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="year"&gt;
      &lt;ul data-year="2011"&gt;
          &lt;li&gt;items ...
      &lt;/ul&gt;
      &lt;ul data-year="2011"&gt;
          &lt;li&gt;items...
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried this which wraps every ul multiple times and does not have the intended results:</p>
  
  <pre><code>$('.projectList ul').each(function(){
          var year = $(this).attr('data-year');
          //alert(year)
          console.log(year);
  
          $('.projectList ul[data-year=' + year + ']').wrapAll('&lt;div class="year"&gt;');
          $('.projectList ul[data-year=' + year + ']').eq(0).before('&lt;h2&gt;'+ year +'&lt;/h2&gt;');
  
  });
  </code></pre>
  
  <p>any help would be great, thanks.</p>