0

I have a component:

    <aura:iteration items="{!v.objects}" var="obj">     
        <lightning:layout multipleRows="true" class="layoutBigCardsColumn">
            <div class="slds-panel__body">
                <p><b>{!obj.Name}</b></p>
                <p>
                    <span class="spanButtonToResults">
                        <lightning:buttonIcon iconName="utility:chevrondown" onclick="{!c.show}" />
                    </span>
                </p>
                <p>{!obj.Location__c}</p>
            </div>
                <br/>
                <div aura:id="divId">
                    <p><b>Detailed INFO about {!obj.Name}</b></p>
                </div>
        </lightning:layout>
    </aura:iteration>

show function doesn't work:

show : function(component, event, helper) {
    var cmpTarget = component.find('divId');
    $A.util.addClass(cmpTarget, 'divShow');
}

My css:

.THIS .divShow {
    color: red;
}

I understand that <aura:id> works in iteration wrong. But how can I fix it?

4

You need to know which element you need, so that means using indexVar:

<aura:iteration items="{!v.objects}" var="obj" indexVar="index">
    <lightning:layout multipleRows="true" class="layoutBigCardsColumn">
        <div class="slds-panel__body" data-index="{!index}">
        ...

And then you find the component you're looking for:

var infos = component.find("divId"),
    // Get the index value
    index = event.target.closest("[data-index]").dataset.index;
// Normalize to array
infos = infos.length? infos: [infos];
$A.util.addClass(infos[index], 'divShow');

find works in the following way: if there are no elements, return undefined, if 1 element, return the element, otherwise return an array. This is a consistent, defined behavior.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.