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");
4
  • 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 Commented Mar 2, 2016 at 2:51
  • 1
    edited to show some markup. Commented Mar 2, 2016 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
    Commented Mar 2, 2016 at 3:28
  • To conditionally set a class for an array of components, pass in the array to $A.util.toggleClass().
    – Ratan Paul
    Commented Mar 2, 2016 at 3:34

1 Answer 1

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

2
  • 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? Commented Mar 2, 2016 at 4:41
  • Those are normal JavaScript methods ..once you get element you can use plain js . please mark answer if it answers Commented Mar 2, 2016 at 5:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .