How to get index of image from ListView on onmouseover event?

Question

I have a ListView that shows images and I can get the index of the image once I click on it, but not able to get the index when I only hover on the image.

This is where I am:

<img onmouseover="ImageListHover(this, $(this));" id="#=ItemID#" src="../Images/CatalogImages/#= CheckForImagesURL(FilePreview) #" alt="#: ItemName # image" />

The function that is being called on the mouseover event is:

function ImageListHover(a, b) {
    console.log("index from a is: " + a.index());
    console.log("index from b is: " + b.index());
}

I am passing over both this and $(this) to see if I can get the index from either of those but to no avail.

EDIT

Here is a link to the code, I had to place it on the kendo dojo because I am using an example that I modified..Example

Answer 1

The issue is because the img elements you're targeting are not siblings, hence they are all at index 0 within their respective containers.

To fix this, provide a selector to index() which explicitly specifies the collection within which you want to retrieve the index within:

function ImageListHover(a, b) {
  console.log("index from b is: " + b.index('.product img'));
}

Also note that using on* event attributes is an outdated technique which should be avoided. Use unobtrusive event handlers instead:

$(function() {
  // your kendo setup here...

  $('.product img').on('mouseenter', function() {
    console.log($(this).index('.product img'));
  });
});