jQuery functions not working with Hammer.js

Question

I am trying to add press to jQuery selector. I have many elements on same document, So I can not use IDs for each. I tried by $(selector)[i] as like explained here.

var selectProduct = $('.mh60 a');
for (var i = 0; i < selectProduct.length; i++) {
  Hammer(selectProduct[i]).on("press", function() {
     $(selectProduct[i]).addClass('active');
  });
}

It's not producing any error and not working. I didn't get what I am missing here.

And when I try to log selectProduct[i] by console.log(selectProduct[i]); it gives undefined result.

UPDATE 1

When I remove for loop and just use selectProduct[0] , selectProduct[1] , ... it's working but with selectProduct[i] , it's not working, So I think problem is on for loop. But I didn't get it.

UPDATE 2

I also tried with jQuery plugin, same problem

UPDATE 3

Again I tried with each(), same problem. It print the console message but addClass() is not working. I guess the problem is with this function which is not returning the current element.

$('.mh60 a').each(function(){
    var mc = new Hammer(this);
    mc.on("press", function() {
      console.log('Double tap!');
      $(this).addClass('active');
    });
 });

Answer 1

Why do you use a for? Try changing your code like this

var selectProduct = $('.mh60 a');
selectProduct.Hammer().on("press", function() {
  $(this).addClass('active');
});

Answer 2

Finally I solved the problem by using each function

$('.mh60 a').each(function(){
    var mc = new Hammer(this);
    var currentEle = $(this);
    mc.on("press", function() {
      currentEle.addClass('active');
    });
 });