0

Even the example from "Lightning Aura Components Developer Guide " doesn't work. I can't set the style to my div. It's because of iteration. How can I fix that?

cmp:

        <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>
    </aura:component>

js:

show : function(component, event, helper) {
    component.find("divId").set("v.class", "divShow");  //"component.find(...).set is not a function"
}

show : function(component, event, helper) {
    //It doesn't work too!
    var cmpTarget = component.find('divId');
    $A.util.addClass(cmpTarget, 'divShow');
}

css:

.THIS .divShow {
color: #66C2FF;
}
2

actually second show variant is working correctly. The only difference is that you have to correctly define class in your style. According to your component markup, <div aura:id="divId">Hello!</div> is top-level element. From documentation

The element matches the .THIS.white selector and renders with a white background. Note that there is no space in the selector as this rule is for top-level elements.

so you want to have style:

.THIS.divShow {
    color: #66C2FF;
}

first variant component.find("divId").set("v.class", "divShow"); is not working because you only can set attribute values for lightning components, that are accessible for current component. div is not lightning component.


assuming all above, you want to have the following:

component.cmp

<aura:component >
    <span class="spanButtonToResults">
        <lightning:buttonIcon name="action" iconName="utility:chevrondown" onclick="{!c.show2}" alternativeText="Action"/>
    </span>                 
    <div aura:id="divId">Hello!</div>
</aura:component>

componentController.js

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

component.css

.THIS.divShow {
    color: #66C2FF;
}

everything is working :)

2
  • No. it's not a top element) Thank you. I already understood what kind of problem is here: both elements are in <aura:iteration>. And it doesn't work like that. – MichaelLev19 Jan 18 '19 at 12:57
  • I updated it. Without iteration all is fine :( – MichaelLev19 Jan 18 '19 at 13:02

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.