How can I get the previous index?

Question

I have a click, task to get the current and previous index of an item.

 $('.item').click(function() { var index = $('.item').index(this), indexLast = 'here prev index'; $('.result').text(index + ', ' + indexLast); });

 .wrap { display: flex; }.item { background-color: #2ecc71; width: 50px; height: 50px; margin: 0 10px; border-radius: 50%; cursor: pointer; }.item:nth-child(even) { background-color: #3498db; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="result"></div>

Example: we clicked on 3. And then on 6. I need to get. index == 6, lastIndex == 3.

Answer 1

You mean like this:

 var indexLast = ''; $('.item').click(function() { var index = $('.item').index($(this)); $('.result').text( 'current: ' + index + ', previous: ' + indexLast); indexLast = index });

 .wrap { display: flex;`enter code here` }.item { background-color: #2ecc71; width: 50px; height: 50px; margin: 0 10px; border-radius: 50%; cursor: pointer; }.item:nth-child(even) { background-color: #3498db; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="result"></div>

Answer 2

Please use this. Hope it will work for you.

var totalClickedArray = [];
$('.item').click(function() {
  var index = $('.item').index(this);
  totalClickedArray.push(index);
  var arraySize = totalClickedArray.length;
  console.log('last index:' + totalClickedArray[arraySize - 2],  ' new index:' + index);
});

Answer 3

 'use strict'; let indexLast = 'here prev index', current_i = 'here prev index' $('.item').click(function() { let index = $('.item').index(this), last_i = current_i; current_i = index; $('.result').text(current_i + ', ' + last_i); });

 .wrap { display: flex; }.item { background-color: #2ecc71; width: 50px; height: 50px; margin: 0 10px; border-radius: 50%; cursor: pointer; }.item:nth-child(even) { background-color: #3498db; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="result"></div>

Answer 4

As an alternative to storing in a variable, you can add a class to the one you click and then check for that class next time you click.

$(".wrap>.item").click(function() {
    var last = $(this).siblings(".active").removeClass("active");
    $(this).addClass("active");

   // output last.text() / $(this).text() as needed
});

Using OPs buttons and this.last index() as specified in the question:

 $('.item').click(function() { var indexLast = $(".item.clicked").index(); var index = $(this).index(); $(this).addClass("clicked").siblings().removeClass("clicked"); $('.result').text(index + ', ' + indexLast); });

 .wrap { display: flex; }.item { background-color: #2ecc71; width: 50px; height: 50px; margin: 0 10px; border-radius: 50%; cursor: pointer; }.item:nth-child(even) { background-color: #3498db; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="result"></div>

Extending this to show the active/lastactive using css gives:

 $(function() { $(".wrap>.item").click(function() { var last = $(this).siblings().removeClass("lastactive").filter(".active").removeClass("active").addClass("lastactive"); $(this).addClass("active"); }); });

 .item { border: 1px solid black; height: 20px; }.active { background-color: yellow; }.lastactive { background-color: #CCC; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="result"></div>