-2

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.

I've started here and here

Any Ideas or something that I have missed?

Thanks

Troy Bryant
  • 994
  • 8
  • 29
  • 60

1 Answers1

1

Simple error based on the misunderstanding that .toLowerCase() is a method, not a property.

.toLowerCase()

not

.toLowerCase
Mitya
  • 33,629
  • 9
  • 60
  • 107