Impossible de détecter l'Index Javascript

Bonjour,


Je travail actuellement sur un projet de création d'une carte interactive.
Seulement voila, depuis ce matin je planche sur un problème plutôt embêtant et difficile à décrypté pour ma part.

Je fais donc appel à vous en espérant que vous puissiez m'aider !

EXPLICATION :

• C'est très simple, j'ai un DOM structuré (code ci-dessous) avec de l'HTML et du javascript (JQuery plus précisément).
• Puis j'ai mon JQuery, qui, à l'aide d'une fonction, devrait récupérer l'index d'une div survolée.


Ce qu'il faut comprendre : J'ai un liste de départements qui est créée en JQuery, chaque département est dans une div de contenu. A l'aide du JQuery, je souhaiterai récupérer dans une variable, le numéro du département que l'on survole avec la souris, et donc en se servant de " index ".

Voici les documents :

Visuel pour comprendre la structure de la liste


Code basique de la structure en html :

<div class="structure_transport_droite">
 <div class="liste_departements1">


 </div>
 <div class="liste_departements2">


 </div>
 <div class="liste_departements3">


 </div>
 <div class="liste_departements4">


 </div>
 <div class="liste_departements5">
 INTERNATIONAL

 </div>

 <div class="clear">

 </div>

Code JQuery pour créer le reste de la page html :

for (var key in departements)
 {

 if (key<=23)
 {
 $('.liste_departements1').append('<div id="'+key+'"class="ligne_departement"><a id="ligne'+key+'" href="">'+departements[key].num+' - '+departements[key].name+'</a> </div>');
 }
 else if (key > 23 && key <= 47){
 $('.liste_departements2').append('<div id="'+key+'"class="ligne_departement"><a id="ligne'+key+'" href="">'+departements[key].num+' - '+departements[key].name+'</a> </div>');

 }
 else if (key > 47 && key <= 71){
 $('.liste_departements3').append('<div id="'+key+'"class="ligne_departement"><a id="ligne'+key+'" href="">'+departements[key].num+' - '+departements[key].name+'</a> </div>');

 }
 else if (key > 71 && key <= 95){
 $('.liste_departements4').append('<div id="'+key+'"class="ligne_departement"><a id="ligne'+key+'" href="">'+departements[key].num+' - '+departements[key].name+'</a> </div>');

 }
 else {
 $('.liste_departements5').append('<div id="'+key+'"class="ligne_departement"><a id="ligne'+key+'" href="">'+departements[key].name+'</a> </div>');

 }

 }

Code de la fonction qui me retourne pas l'index du département :

$('.structure_transport_droite div .ligne_departement').mouseover(function(){

 var departement=$(this).index; 
 console.log($(this).index);

 $('.map .overlay').css ({
 background: "url(overlay/"+departement+".png) top no-repeat;"
 });

 });

Voila, la commande console.log($(this).index); me retourne ceci au lieu d'un nombre :



Je suis un peu à cours d'idée, alors j'attends avec impatience vos commentaires qui pourront sûrement m'aider à y voir plus clair !

merci d'avance,
Cordialement