Apply jQuery code to divs individually
<p>I'm using the following code:</p>

<pre><code>$('.game-list-right-bottom &gt; .game-list-file').each(function(i) {
  if( i % 4 == 0 ) {
    $(this).nextAll().andSelf().slice(0,4).wrapAll('&lt;div class="game-list-files"&gt;&lt;/div&gt;');
  }
});
</code></pre>

<p>to turn this:</p>

<pre><code> &lt;div class="game-list-right-bottom"&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>into this:</p>

<pre><code>  &lt;div class="game-list-right-bottom"&gt;
     &lt;div class="game-list-files"&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="game-list-files"&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>(basically wrap a <code>.game-list-files</code> to every four .game-list-file).</p>

<p>The problem is that I have more than one <code>.game-list-right-bottom</code>:</p>

<pre><code>  &lt;div class="game-list-right-bottom"&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="game-list-right-bottom"&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>So it ends up like this:</p>

<pre><code>  &lt;div class="game-list-right-bottom"&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="game-list-right-bottom"&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
     &lt;div class="game-list-files"&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
     &lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
        &lt;div class="game-list-file"&gt;&lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>I would like to apply that jQuery code individually to each <code>.game-list-right-bottom</code>.
How to archive that?</p>
