title: How to iterate through multiple divs of (almost) same class
body: <p>Let's say I got 12 divs of class <code>subClass</code>, each ending with individual number: <code>subClass-1</code> , <code>subClass-2</code> and so on. Also, for each of those classes I got same function, for example:</p>
  
  <pre><code>function toggleAreas1() {
        var $hide = $('.toggle-areas-1 &gt; .row:visible');      
        $hide.fadeOut(function() {
            if ($hide.next().length) {
                $hide.next().fadeIn();
            } else {
                $hide.prevAll().last().fadeIn();
            }
        });
     }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>function toggleAreas1(index) {
     for (i = 0; i &lt; 12; i++) { 
        index = i++
        var $hide = $('.toggle-areas-index &gt; .row:visible');      
     }
        $hide.fadeOut(function() {
            if ($hide.next().length) {
                $hide.next().fadeIn();
            } else {
                $hide.prevAll().last().fadeIn();
            }
        });
     }
  </code></pre>
  
  <p>But of course it doesn't work, for my js skills are non-existent. What should I do to fix my problem?</p>