[SalesForce] Lightning Component: Iterate list of elements to change style

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");

Best Answer

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

Related Solutions

[SalesForce] How to iterate over SObject list returned in Lightning Component Dynamically

This is pretty old, but figured I'd try to answer anyway for people that may still be having trouble with this.

In short, I have not found a way to accomplish exactly what you're looking for but have a workaround that works pretty well for my use cases.

Essentially, I create a child component and handle the references there. Here's a quick bare-bones example:

Parent component:

<aura:iteration items="{!v.records}" var="record">
    <tr class="slds-hint-parent">
        <aura:iteration items="{!v.fieldsAPI}" var="fieldAPI">
            <c:ChildComponent record='{!record}' fieldName='{!fieldAPI}'/>
        </aura:iteration>
    </tr>
</aura:iteration>

Child component:

<aura:attribute name='record' type='Object'/>
<aura:attribute name='fieldName' type='String'/>
<aura:attribute name='fieldValue' type='String'/>


<td>
    <div class="slds-truncate" title="{!v.fieldName}">{!v.fieldValue}</div>
</td>

Child controller (init):

var fieldName = component.get('v.fieldName');
component.set('v.fieldValue', component.getReference('v.record.' + fieldName));

This way, you can reference the object fields dynamically while still preserving the binding (e.g. if you update the field from the child, it is reflected in the parent as well through the use of getReference). Also, instead of iterating over a list of strings I typically use a wrapper class containing some additional field information to handle different field types gracefully (helpful when building dynamic forms and the like).

Sure, you have to jump through a few hoops, but this method has helped me alot with dynamic components

[SalesForce] Compare list of elements in js lightning

You can't access an object property using: component.get("v.SelectedRecordProj.Id");

You have to use: component.get("v.SelectedRecordProj").Id;

Also, you can use the Javascript method some() to check if an element Id exists in your array.

Here's the right code:

var arrs = component.get("v.proNamesList");
var newElement = component.get("v.SelectedRecordProj");
var existsInArray = arrs.some(function (el) {
     return el.Id === newElement.Id;
});
if(existsInArray === false) { arrs.push(newElement); }

Best Answer

Related Solutions

[SalesForce] How to iterate over SObject list returned in Lightning Component Dynamically

[SalesForce] Compare list of elements in js lightning

Related Topic