Set style of component.find(element)'s parent

Question

This is in continuation of the question here

I have included a select all checkbox in the header that sets the value of the checkboxes in the table. I am trying to highlight the selected rows. It works when an individual checkbox is selected (thanks to the community), but I am unable to do so when select all is used.

Here's my code snippet:

Markup

<table class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout slds-no-cell-focus slds-table_edit" role="grid">
    <thead>
        <tr class="slds-line-height_reset">
            <th scope="col" style="width: 1rem;">...</th>
            <th>
                <div class="slds-th__action slds-th__action_form">
                    <span class="slds-checkbox">
                        <lightning:input type="checkbox" class="field" onchange="{!c.selectAll}" aura:id="check-toprow" variant="label-hidden" 
title="Select All" label="Select all"/>
                    </span>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <aura:iteration items="{!v.records}" var="lineItem" indexVar="i">
            <tr class="slds-hint-parent" aura:id="parentRow">
                <td class="slds-cell-edit" role="gridcell">...</td>
                <td class="slds-cell-edit" role="gridcell">
                    <span class="slds-checkbox">
                <lightning:input aura:id="select-row" type="checkbox" class="field" onchange="{!c.selectRow}" name="{!'checkbox-' + (i+1)}" tabindex="-1" variant="label-hidden" label="Select Row"/> 
              </span>
                </td>
            </tr>
        </aura:iteration>
    </tbody>
</table>

Controller

selectAll : function(component, event, helper) {
    var items = component.find('select-row'),
        value = event.getSource().get('v.checked');
    if (items) {
        if (!$A.util.isArray(items)) items = [items];
            for (var i in items){
            items[i].set('v.checked', value);
                if(value){
                    $A.util.addClass(items[i].parentElement, "setSelected");
                }else{
                    $A.util.removeClass(items[i].parentElement, "setSelected");
                }
            }
    }
}

When I tried $A.util.addClass(items[i].parentElement.parentElement, "setSelected") I get an error that says cannot read property 'parentElement' of undefined.

Answer 1

yeselkay when you use iteration you actually generate a multiple rows with the same aura:id. Then when you try to find them I think the aura id does not work when the value of the Id is not unique.

Try using the class attribute and then finding the elements with the function document.getElementsByClassName("example").

If you need to select more than one element usually it is better idea to use classes.

https://stackoverflow.com/questions/5338716/get-multiple-elements-by-id