Question

I am trying to understand how to use jquery’s each(), because what I tried so far is not working.

In my example I am trying to use .each() to add a border to the first element when any ‘special’ div is clicked. The next time a ‘special’ div is clicked, add a border to the second ‘special’ element. Third time any ‘special’ div is clicked add a border to the third element, etc…

JS

$.each(function(i) {
     $('.special').click(function(){
         $('.special[i]').css('border','2px solid red');
     }
     i++;
});

HTML

    <div class="special">fooft1</div>
    <div class="special">fooft2</div>
    <div class="special">fooft3</div>
    <div class="special">fooft4</div>
    <div class="special">fooft5</div>
    <div class="special">fooft6</div>

Answer 1

var i = 0;
$('.special').click(function(){
         $(".special:eq("+i+")").css('border','2px solid red');
     }
     i++;
});