CODEWITHSUNDEEP
javascriptjquery
roonroon
roonroon

Reputation: 399

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

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?

Upvotes: 0

Views: 102

Answers (6)

Patrick Evans
Patrick Evans

Reputation: 42736

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>

Upvotes: 0

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34199

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();

Upvotes: 0

gaauspawcscwcj
gaauspawcscwcj

Reputation: 3

try this: 

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

Upvotes: 0

guest271314
guest271314

Reputation: 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();
    }
  });
}

Upvotes: 2

Johnny Wong
Johnny Wong

Reputation: 975

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

i.e.

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

Upvotes: 0

sharath
sharath

Reputation: 1

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

Upvotes: 0

Related Questions