CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Alex Man
Alex Man

Reputation: 4886

alternative for .first() in jqlite

I have created a drop-down using angularjs directive, the directive is working fine, right now I writing all the css within the directive itself, In one of the feature when the mouse hovers the drop-down list options it should change the background color to #27A1EC - blue, and text color to white, on mouse leave then the background color to be white and text color to be the actual color, everything is working fine but one issue I am facing is that since we don't have JQuery .find() option in JQLite I have tried using like as shown below

I have used angular.element(document.querySelector('#parent')) instead of elm.find('a').first(), I don't whether this is correct or not

 elm.find("a").bind("mouseover", function() {
        scope.actualColor = scope.textColor.color;
        //elm.find('a').first().css('color', 'white').css('background-color', '#27A1EC');
        angular.element(document.querySelector('#parent')).css('color', 'white').css('background-color', '#27A1EC');
      });

 elm.find("a").bind("mouseleave", function() {
        //elm.find('a').first().css('color', scope.actualColor).css('background-color', 'white');
        angular.element(document.querySelector('#parent')).css('color', scope.actualColor).css('background-color', 'white');
      });

Now when I hover the mouse to Parent2 within the drop-down list the hover color changing is redirecting and is applying to Parent1

Can anyone please tell me some solution for this,

Plunker

Upvotes: 1

Views: 332

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

In your case the problem is you have multiple elements with the id parent, so when using querySelector it will return the first element with the id parent.

You can use .eq(0) instead of first()

elm.find('a').eq(0).css('color', 'white');

But a better solution will be is to assign a class parent to the parent element instead of id like

<a class='parent' href='#' ng-click='getValue(optGroupLabel,optGroupValue)'>{{optGroupLabel}}<span class='value'>{{optGroupValue}}</span></a>

then

angular.element(elm[0].querySelector('.parent')).css('color', scope.actualColor).css('background-color', 'white');

Upvotes: 2

Related Questions