assign dynamic ids to lightning component dom element and then access it in lightning js controller/helper

Question

I know that we cannot assign expressions to the aura : id. It should be hard coded string literal, as per the salesforce documentation. Also, we cannot use html Id, as document.getElementById is no more supported. I saw some posts related to this where it was suggested to dynamically create the component. But that go well with the below scenario. Is there any workaround for this ? Basically i have a checkbox and a text inside an iteration element, in a lightning component. when the checkbox is checked, i want to strike out the corresponding text. Below is the code snippet.

Component :

<aura:iteration items="{!v.somelist}" var="val"> 
   <input name="checkbox" type="checkbox" id="{!val.id}" onclick="{!c.somefunction}"/>
   <a id="{!val.id}"> some text </a>
</aura:iteration>

Controller :

---

somefunction: function(component, event, helper) {
    var id = event.target.id;
    // is there a way, i can get the anchor tag element and add the css 
    class strikeText to it ?    
}

CSS :

---

.THIS .strikeText{
    text-decoration:line-through; 
}

Appreciate any help on this.

Answer 1

You can add custom html attributes to your checkbox. For example:

<input name="checkbox" type="checkbox" onclick="{!c.somefunction}" 
 data-anchorId="{!val.Id}" />

Then in your controller, you can use the document.getElementById() Javascript function to find the anchor depending on your custom attribute:

var anchorId = event.target.getAttribute("data-anchorId");
var anchor = document.getElementById(anchorId);
anchor.className += " strikeText";