Question

Given the HTML:

<div id="carrousel-wrapper">
  <div class="region region-carousel-1">
    ....
  </div>
  <div class="region region-carousel-2">
    ....
  </div>
</div>

I walk trough the selectors as follows:

  var wrapper = $('#carousel-wrapper .region');
  if(wrapper.length) {
    $(wrapper).each(function(i) {
      var regionClass = 'region-carousel-' + (i + 1);

But I want a cleaner way to find regionClass. The current way breaks in cases where e.g. .region-carousel-1 does not exist.

How can I retrieve the “additional” subclasses for .carrousel-wrapper .region?

Answer 1

Within the each() method you can use the this keyword to refer to the current element. Also, the if (wrapper.length) check is redundant as the each() method won’t throw an error if there are no elements provided to it. Finally, you’re double-wrapping the wrapper variable in a jQuery object.

With all that in mind, the below should work for you:

var wrapper = $('#carousel-wrapper .region');
wrapper.each(function(i) {
    var regionClass = $(this).attr("class");
});