Найти индекс в массиве, отличный от массива, который загрузился

Question

Строка 35, непосредственно перед предупреждением, возвращает -1. Я также попробовал $(this).index() с тем же результатом. Вот что он должен делать: нажав EN.gif, следует вернуть 4, затем grand_array_pics[4] должен дать мне en_array_pics и загрузить .gifs в этом массиве.

$(document).ready(function() { 

    var main_pics = ["AN.gif", "BN.gif", "CN.gif", "DN.gif", "EN.gif", "GN.gif"]; 

    var starting_pics = ["AN.gif", "CN.gif", "EN.gif"]; 

    var an_array_pics = ["BN.gif", "EN.gif", "GN.gif", "AN.gif","DN.gif"]; 
    var bn_array_pics = ["CN.gif", "DN.gif", "GN.gif"]; 
    var cn_array_pics = ["DN.gif", "GN.gif", "AN.gif", "CN.gif"]; 
    var dn_array_pics = ["EN.gif", "AN.gif", "CN.gif"]; 
    var en_array_pics = ["GN.gif", "AN.gif", "CN.gif", "EN.gif"]; 
    var gn_array_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"]; 

    var grand_array_pics = [ 
     an_array_pics, 
     bn_array_pics, 
     cn_array_pics, 
     dn_array_pics, 
     en_array_pics, 
     gn_array_pics 
    ]; 

    var i = 0; 

    for (i = 0; i < starting_pics.length; i++) { 
     $("<img/>").attr("src", "images/" + starting_pics[i]).load(function() { 
      $(this).appendTo("#main"); 
      $(this).addClass("pics"); 
     }); 
    } 

    $("#main").on("click", ".pics", function() { 

     var j = $.inArray(this, main_pics); 
     alert(j); 

     $("#sidebar .pics").remove(); 
     $(this).clone().appendTo("#train"); 
     $(this).clone().appendTo("#sidebar"); 
     $("#main .pics").remove(); 

     var chosen_pics_array = grand_array_pics[j]; 
     var count = chosen_pics_array.length; 

     var k = 0; 

     for (k = 0; k < count; k++) { 
      $("<img/>").attr("src", "images/" + chosen_pics_array[k]).load(function() { 
       $(this).appendTo("#main"); 
       $(this).addClass("pics"); 
      }); 
     } 
    }); 
});  //end ready 

Answer 1

this является элементом DOM <img>, а main_pics представляет собой массив строк. Он никогда не будет найден внутри. Используйте

var j = $.inArray(this.src.split("/").pop(), main_pics); 

Answer 2

Дайте это попробовать. Вы должны получить имя файла и вы передаете сам элемент в $.inArray

var j = $.inArray(this.src.substring(this.src.lastIndexOf('/')+1), main_pics);