I have been spinning my wheels on this for a while now. I have an object array constructed like this :
0: {name: "Coaches", isActive: true, locations: Array(13)}
1: {name: "Directors", isActive: false, locations: Array(13)}
2: {name: "Trainers", isActive: false, locations: Array(5)}
I have a nav menu and when mouse enters gets the text of the line item. Now I am trying to in my array compare that text to the name text so i can build the sub items of locations
$('.nav ul').hide();
$('.nav li').mouseenter(function () {
$(this).children('ul').stop().slideDown('slow');
var text = $(this).find('span').text();
//console.log(text);
var item = leftNavData.modules.findIndex(i => i.name.toLowerCase() === "coaches");
var i = leftNavData.modules.find(x => x.name.toLowerCase() == text.toLowerCase());
console.log(i);
console.log(item);
}).mouseleave(function () {
$(this).children('ul').stop().slideUp('slow')
});
The find always returns the same object the first one coaches even if I mouse over other elements.
The text is changing but the find always retuns the first object.
The findIndex is always 0.
Any Ideas or something that I have missed?
Thanks