title: Indexing position in Javascript: continue after class
body: <p>I need to change the indexing of some elements, is there a way to continue with the indexing of <code>select-image</code> like the <code>class=&quot;column&quot;</code> is not there? For clarity, I want something like that:</p>
  <pre><code>&lt;div class=&quot;pagination-slider&quot;&gt;
  &lt;div class=&quot;column&quot;&gt;
  0 &lt;div class=&quot;select-image&quot;&gt;&lt;/div&gt;
  1 &lt;div class=&quot;select-image&quot;&gt;&lt;/div&gt;
  2 &lt;div class=&quot;select-image&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;column&quot;&gt;
  3 &lt;div class=&quot;select-image&quot;&gt;&lt;/div&gt;
  4 &lt;div class=&quot;select-image&quot;&gt;&lt;/div&gt;
  5 &lt;div class=&quot;select-image&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    //create elements
    $('.slider').each(function() {
      $slider = $(this);
      var $slider_block = $slider.find($('.slider-block'));
      $slider_block.append('&lt;div class="pagination-slider"&gt;&lt;/div&gt;') //add the div for the pagination
  
      var titles_pagination = $slider.find($('.slider-title'));
      titles_pagination.each(function() {
        $slider.find($('.pagination-slider')).append('&lt;div class="select-image" alt="go to image" role="tab" tabindex="0"&gt;&lt;span&gt;' + $(this).text() + "&lt;/span&gt;&lt;/div&gt;") //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 &gt;= 8) {
        var parentContainer = $('.pagination-slider');
        v2 = (Math.floor(lenChild / 8) * 8);
        parentElem = 0;
        jQuery(this).find('.select-image').each(function() {
          if (i &lt; v2) {
            if (i % 8 == 0) {
              if (i != 0)
                jQuery(parentElem).appendTo(jQuery(parentContainer));
              parentElem = jQuery('&lt;div class="column-slider"&gt;&lt;/div&gt;');
            }
            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');
          });
        }
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="slider"&gt;
    &lt;div class="slider-block"&gt;
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 1&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMERO ITEM"&gt;&lt;img draggable="false" src="INDIRIZZO IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 2&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 3&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 4&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 5&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 6&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 7&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 8&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 9&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
      &lt;figure class="imageslide"&gt;
        &lt;a class="item-slider" draggable="false" href="../item/NUMEROITEM"&gt;&lt;img draggable="false" src="IMMAGINE" /&gt;&lt;span class="slider-title"&gt;Fig 10&lt;/span&gt;&lt;/a&gt;
      &lt;/figure&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>