CODEWITHSUNDEEP
jquery
wyc
wyc

Reputation: 55263

Apply jQuery code to divs individually

I'm using the following code:

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

to turn this:

 <div class="game-list-right-bottom">
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
  </div>

into this:

  <div class="game-list-right-bottom">
     <div class="game-list-files">
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
     </div>
     <div class="game-list-files">
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
     </div>
  </div>

(basically wrap a .game-list-files to every four .game-list-file).

The problem is that I have more than one .game-list-right-bottom:

  <div class="game-list-right-bottom">
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
  </div>

  <div class="game-list-right-bottom">
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
  </div>

So it ends up like this:

  <div class="game-list-right-bottom">
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
  </div>

  <div class="game-list-right-bottom">
        <div class="game-list-file"></div>
     <div class="game-list-files">
        <div class="game-list-file"></div>
     </div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
        <div class="game-list-file"></div>
  </div>

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

Upvotes: 0

Views: 54

Answers (2)

Steely Wing
Steely Wing

Reputation: 17597

Try this

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

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206024

Start with using the .each() for your .game-list-right-bottom, not the childrens.

Upvotes: 2

Related Questions