jQuery split list after every nth

Change class name on click in jQuery

by Seetpal Singh

HTML

<ul id='list'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>67</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>4</li>
  <li>23</li>
  <li>23</li>
  <li>53
  </li>
</ul>

CSS

body{
  background: #000;
  }
ul {
  color:white;
  padding: 20px;
  font-family: Helvetica;
  margin-bottom: 15px;
  padding:0;
}

JavaScript

/* $('#list').chunk(3).wrap('<ul class="new"></ul>'); */


$.fn.chunk = function(size) {
  var arr = [];
  for (var i = 0; i < this.length; i += size) {
    arr.push(this.slice(i, i + size));
  }
  this.unwrap();
  return this.pushStack(arr, "chunk", size);
}
$("#list li").chunk(3).wrap('<ul class="new"></ul>');