Indexing position in Javascript: continue after class

Question

I need to change the indexing of some elements, is there a way to continue with the indexing of select-image like the class="column" is not there? For clarity, I want something like that:

UPDATE: here is my code for creating the classes. I actually need to create two columns for graphic reasons (it works fine on the website, I don't know why it doesn't work on the snippet), but with that the indexes are messed up, so the selection doesn't work properly. If I click on Figure 9 it stays with Figure 1, because of the indexing.

$(document).ready(function() {

  //create elements
  $('.slider').each(function() {
    $slider = $(this);
    var $slider_block = $slider.find($('.slider-block'));
    $slider_block.append('') //add the div for the pagination

    var titles_pagination = $slider.find($('.slider-title'));
    titles_pagination.each(function() {
      $slider.find($('.pagination-slider')).append('' + $(this).text() + "") //gets the titles and relative urls to the slider items
    });

    $slider.find($('.imageslide')).each(function(i, el) { //add a numbered id for each figure
      $(el).attr('id', 'image-num-' + i);
    });

    //if there are more than 8 figures, make 2 columns of selection buttons
    i = 0;
    lenChild = $('.select-image').length;
    if (lenChild >= 8) {
      var parentContainer = $('.pagination-slider');
      v2 = (Math.floor(lenChild / 8) * 8);
      parentElem = 0;
      jQuery(this).find('.select-image').each(function() {
        if (i < v2) {
          if (i % 8 == 0) {
            if (i != 0)
              jQuery(parentElem).appendTo(jQuery(parentContainer));
            parentElem = jQuery('');
          }
          jQuery(this).appendTo(jQuery(parentElem));
          i++;
        }
      });
      jQuery(parentElem).appendTo(jQuery(parentContainer));
    }
  });
  //select and change figure

  $('.slider').each(function() {
    $slider = $(this);

    var $slides = $slider.find($('.imageslide'));
    var $selectors = $slider.find($('.select-image'));

    $slides.first().addClass('current').show();
    $selectors.first().addClass('selected');

    $selectors.click(function() {
      var index = $(this).index(); //the index of the selector
      var $nextSlide = $slides.eq(index);
      // don't do anything if same indexed slide already has current class
      if (!$nextSlide.hasClass('current')) {
        $slides.filter('.current').removeClass('current').fadeOut(function() {
          $selectors.filter('.selected').removeClass('selected')
          $nextSlide.addClass('current').fadeIn()
          $selectors.eq(index).addClass('selected');
        });
      }
    });
  });
});

.imageslide {
  display: none;
  border: 3px solid black;
  padding: 10px;
  position: relative;
}

.slider-block {
  justify-content: center;
  display: flex;
}

.slider-title {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  background-color: black;
  color: white;
}

.pagination-slider {
  margin-top: 1em;
}

.column-slider{
  float: left;
}

.select-image {
  background-color: #fa648f;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  margin: 0.5em;
  cursor: pointer;
}

.select-image::after {
  content: "";
  position: relative;
  height: 3px;
  left: 0;
  top: 0.6em;
  /*same as padding*/
  display: block;
  width: 100%;
  background-color: #000;
  transform: scaleX(0);
  visibility: hidden;
  transition: all 0.3 ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.select-image:hover::after,
.select-image:focus::after {
  transform: scaleX(1);
  visibility: visible;
}

.select-image.selected {
  border: 3px solid black;
}

.select-image.selected:hover::after,
.select-image.selected:focus::after {
  visibility: hidden;
}

thchp · Accepted Answer

You could do that different ways. I propose this one:

Add a data-index attribute to each .select-image elements when you generate the columns (line 11).
Retrieve this attribute when you need the index. Instead of doing $(this).index(), do $(this).data('index').

$(document).ready(function() {

  //create elements
  $('.slider').each(function() {
    $slider = $(this);
    var $slider_block = $slider.find($('.slider-block'));
    $slider_block.append('') //add the div for the pagination

    var titles_pagination = $slider.find($('.slider-title'));
    titles_pagination.each(function(index) {
      $slider.find($('.pagination-slider')).append('' + $(this).text() + "") //gets the titles and relative urls to the slider items
    });

    $slider.find($('.imageslide')).each(function(i, el) { //add a numbered id for each figure
      $(el).attr('id', 'image-num-' + i);
    });

    //if there are more than 8 figures, make 2 columns of selection buttons
    i = 0;
    lenChild = $('.select-image').length;
    if (lenChild >= 8) {
      var parentContainer = $('.pagination-slider');
      v2 = (Math.floor(lenChild / 8) * 8);
      parentElem = 0;
      jQuery(this).find('.select-image').each(function() {
        if (i < v2) {
          if (i % 8 == 0) {
            if (i != 0)
              jQuery(parentElem).appendTo(jQuery(parentContainer));
            parentElem = jQuery('');
          }
          jQuery(this).appendTo(jQuery(parentElem));
          i++;
        }
      });
      jQuery(parentElem).appendTo(jQuery(parentContainer));
    }
  });
  //select and change figure

  $('.slider').each(function() {
    $slider = $(this);

    var $slides = $slider.find($('.imageslide'));
    var $selectors = $slider.find($('.select-image'));

    $slides.first().addClass('current').show();
    $selectors.first().addClass('selected');

    $selectors.click(function() {
      var index = $(this).data('index'); //the index of the selector
      var $nextSlide = $slides.eq(index);
      // don't do anything if same indexed slide already has current class
      if (!$nextSlide.hasClass('current')) {
        $slides.filter('.current').removeClass('current').fadeOut(function() {
          $selectors.filter('.selected').removeClass('selected')
          $nextSlide.addClass('current').fadeIn()
          $selectors.eq(index).addClass('selected');
        });
      }
    });
  });
});

.imageslide {
  display: none;
  border: 3px solid black;
  padding: 10px;
  position: relative;
}

.slider-block {
  justify-content: center;
  display: flex;
}

.slider-title {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  background-color: black;
  color: white;
}

.pagination-slider {
  margin-top: 1em;
}

.column-slider{
  float: left;
}

.select-image {
  background-color: #fa648f;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  margin: 0.5em;
  cursor: pointer;
}

.select-image::after {
  content: "";
  position: relative;
  height: 3px;
  left: 0;
  top: 0.6em;
  /*same as padding*/
  display: block;
  width: 100%;
  background-color: #000;
  transform: scaleX(0);
  visibility: hidden;
  transition: all 0.3 ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.select-image:hover::after,
.select-image:focus::after {
  transform: scaleX(1);
  visibility: visible;
}

.select-image.selected {
  border: 3px solid black;
}

.select-image.selected:hover::after,
.select-image.selected:focus::after {
  visibility: hidden;
}

Indexing position in Javascript: continue after class

Answers (1)

Related Questions