I'm attempting to find the parent tr element when I use clicks a button on a datepicker calendar. Since I don't want to use jQuery in the form of a script tag (edit) in my Angular app, and this isn't possible using strictly CSS, I created the directive below. The elm.find is able to find and alter the css of the button correctly, so I know that I've found the element I'm looking for, however now I need to travel up the DOM.

I'm used to jQuery syntax, which doesn't work, and I haven't been able to find anything effective on the interwebs. Any chance someone could help me out with the syntax?

    /* Linker for the directive */
    var linker = function (scope, elm, attrs) {                   
        elm.on('click', function() {
            elm.find('table tbody tr button.active').parent('td').css('background-color', 'red');
        });
    };

EDIT

This is a directive that needs to be placed on a uib-datepicker element (Angular UI Bootstrap) in order to change alter the background-color for an entire row. The framework doesn't e with this functionality and the HTML isn't generated until the page loads.

I need to attach the directive to the element below, find the selected item and then work back up the DOM to find the parent tr.

<uib-datepicker highlightselectedrow class="well well-sm" ></uib-datepicker>

I'm attempting to find the parent tr element when I use clicks a button on a datepicker calendar. Since I don't want to use jQuery in the form of a script tag (edit) in my Angular app, and this isn't possible using strictly CSS, I created the directive below. The elm.find is able to find and alter the css of the button correctly, so I know that I've found the element I'm looking for, however now I need to travel up the DOM.

I'm used to jQuery syntax, which doesn't work, and I haven't been able to find anything effective on the interwebs. Any chance someone could help me out with the syntax?

    /* Linker for the directive */
    var linker = function (scope, elm, attrs) {                   
        elm.on('click', function() {
            elm.find('table tbody tr button.active').parent('td').css('background-color', 'red');
        });
    };

EDIT

This is a directive that needs to be placed on a uib-datepicker element (Angular UI Bootstrap) in order to change alter the background-color for an entire row. The framework doesn't e with this functionality and the HTML isn't generated until the page loads.

I need to attach the directive to the element below, find the selected item and then work back up the DOM to find the parent tr.

<uib-datepicker highlightselectedrow class="well well-sm" ></uib-datepicker>

• javascript
• angularjs
• dom
• angularjs-directive

• 1 I think you should use .closest instead of parent('td') OR think of using ng-class if its feasible. – Pankaj Parkar Commented Jul 27, 2016 at 21:01
• @PankajParkar .closest worked. If you want to add as an answer I'll accept it. – NealR Commented Jul 27, 2016 at 21:10
• Yes, I did, Thanks ;) – Pankaj Parkar Commented Jul 27, 2016 at 21:13
• I could reproduce the scenario, but could not get .closest to work in my repro. OP, can you help me understand how you got it to work and/or what's different in your situation from my repro? – Jeroen Commented Jul 27, 2016 at 21:35

2 Answers 2

.parent will look exact the upper element only. I'd say that rather use .closest so it will search in parent till it gets td

elm.find('table tbody tr button.active')
.closest('td').css('background-color', 'red');

What about taking a more angular approach than psuedo jQuery? This is based on the ngStyle Angular doc:

<div ng-style="myStyle">Test</div>
<div ng-click="myStyle={'background-color':'red'}">Click Me</div>

You would then place the click event on whatever element you want (td). The ng-style can be moved to what you want affected (tr).