How to iterate through multiple divs of (almost) same class

Question

Let's say I got 12 divs of class subClass , each ending with individual number: subClass-1 , subClass-2 and so on. Also, for each of those classes I got same function, for example:

function toggleAreas1() {
      var $hide = $('.toggle-areas-1 > .row:visible');      
      $hide.fadeOut(function() {
          if ($hide.next().length) {
              $hide.next().fadeIn();
          } else {
              $hide.prevAll().last().fadeIn();
          }
      });
   }

But for obvious reasons, I don't want to use 12 different, yet almost identical functions, when I easily could use one, more universal. I was thinking about something along these lines:

function toggleAreas1(index) {
   for (i = 0; i < 12; i++) { 
      index = i++
      var $hide = $('.toggle-areas-index > .row:visible');      
   }
      $hide.fadeOut(function() {
          if ($hide.next().length) {
              $hide.next().fadeIn();
          } else {
              $hide.prevAll().last().fadeIn();
          }
      });
   }

But of course it doesn't work, for my js skills are non-existent. What should I do to fix my problem?

Answer 1

function toggleAreas1() {
  var $hide = $("[class^=toggle-areas] > .row:visible");
  $hide.fadeOut(function() {
    if ($hide.next().length) {
      $hide.next().fadeIn();
    } else {
      $hide.prevAll().last().fadeIn();
    }
  });
}

Answer 2

You can use string concatenation for building jQuery selectors:

for (i = 1; i <= 12; i++) 
{ 
    var $hide = $('.toggle-areas-' + i + ' > .row:visible'); // .toggle-areas-1, .toggle-areas-2 etc.   

    $hide.fadeOut(function() {
        if ($hide.next().length) {
            $hide.next().fadeIn();
        } else {
            $hide.prevAll().last().fadeIn();
        }
    });
}

However, why don't you just give them the one common class like toggle-areas ? You can add this class in addition to your existent:

<div class="toggle-areas toggle-areas-1"></div>
<div class="toggle-areas toggle-areas-2"></div>
<div class="toggle-areas toggle-areas-3"></div>

Then, you will be able to do both:

// Affects all toogle-areas
$(".toogle-areas").fadeOut(function() {
    if ($hide.next().length) {
        $hide.next().fadeIn();
    } else {
        $hide.prevAll().last().fadeIn();
    }
});

and

// Affects only toogle-areas-2
$('.toggle-areas-2 > .row:first').show().nextAll().hide();

Answer 3

try changing var $hide = $('.toggle-areas-index > .row:visible'); to var $hide = $('.toggle-areas-'+index+' > .row:visible');

Answer 4

You would need the + operator for gluing an integer variable to strings:

ie

var $hide = $('.toggle-areas-' + index + ' > .row:visible');

Answer 5

What you are looking for are attribute substring selectors .

So if your class begins with subClass use: [class^=subClass]

$('[class^=subClass]');

Note though that this tests against the full attribute string so if there is something else in front it will not match, ie class="class1 subClass-1" in which case you can use the other two $= , *= selectors. The first one doing an ends with match, the second doing a contains match.

 jQuery('[class^=subClass]').css({ background:'#ffff00', }); 

 [class^=subClass] { width:48px; height:48px; margin-bottom:3px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="subClass-1"></div> <div class="subClass-2"></div> <div class="subClass-3"></div> 

Answer 6

try this:

    function toggleAreas1() {
    var $hide = $('[class^=toggle-areas] > .row:visible').each(function(){
    $(this).fadeOut(function() {
    // do what you need
    });
});