5

I have a series of divs in a list-style view on a sidebar and I want to change the style of one when it's clicked. I want the previously-clicked div to lose the class name that was giving it the highlighted style, and then add the class name to the newly clicked div.

In a component controller, are you able to loop over a list of elements from the view? I'm looking for something like a ".each()" jQuery function that I can use w/lightning JS controller out of the box if possible?

<aura:iteration items="{!v.relationships}" var="r">
  <div aura:id="{!r.Id}" class="slds-page-header data-row" role="banner" onclick="{!c.showDetail}" data-id="{!r.Id}" data-name="{!r.Name}">
    {!r.Name}
  </div>
</aura:iteration>

In my css, I have this:

.THIS .data-row:hover {
    background-color:#54698d;
    color:white;
    cursor:pointer;
}
.THIS .data-row .selectedRow{
    background-color:#54698d;
    color:white;
}

Essentially, when I click on one div, I want to:

// do some kind of loop here to remove the "selectedRow" class from all the divs
//component.find(someElements).each()... // like jQuery...
// $A.util.removeClass(thisElement,"selectedRow");
// then add the class to my selected div...
$A.util.addClass(myElement,"selectedRow");
  • 1
    If you could throw some DOM and show what you looking for ,I can dig from there .I use .find function and trace back all DOM – Mohith Shrivastava Mar 2 '16 at 2:51
  • 1
    edited to show some markup. – Jason Benkert Mar 2 '16 at 3:05
  • @JasonBenkert check Toggling a Class mapClasses: function(arr, cssClass) { for(var cmp in arr) { $A.util.toggleClass(arr[cmp], cssClass); } } – Ratan Paul Mar 2 '16 at 3:28
  • To conditionally set a class for an array of components, pass in the array to $A.util.toggleClass(). – Ratan Paul Mar 2 '16 at 3:34
3

Here is a sample code for the scenario

<aura:component>
<aura:attribute name="arrvals" type="integer[]" default="1,2,3,4,5"/>  

<div aura:id="main">
    <aura:iteration items="{!v.arrvals}" var="r">
      <div aura:id="{!r.Id}" class="slds-page-header data-row" role="banner" onclick="{!c.showDetail}" data-id="{!r}" data-name="{!r}">
        Hello List No {!r}
      </div>
    </aura:iteration>
</div>

The JS controller

({
showDetail: function(component, event, helper) {
    var arr = [];
    arr = component.find("main").getElement().childNodes;
    console.log(event.target);
    for(var cmp in component.find("main").getElement().childNodes) {
        $A.util.removeClass(arr[cmp], "selectedRow");
    }
    var targetElement = event.target;
    $A.util.addClass(targetElement,"selectedRow");
    }
 })

The CSS class

.THIS .data-row:hover {
 background-color:#54698d;
 color:white;
 cursor:pointer;
}
.THIS .data-row.selectedRow{
  background-color:#54698d;
  color:white;
 }

Demo

enter image description here

| improve this answer | |
  • awesome. I was wondering - I can't find any documentation anywhere on what methods are available on the 'component' object in the controller. Like where you're using ".getElement().childNodes" - where is that kind of stuff referenced in the docs? – Jason Benkert Mar 2 '16 at 4:41
  • Those are normal JavaScript methods ..once you get element you can use plain js . please mark answer if it answers – Mohith Shrivastava Mar 2 '16 at 5:10

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.