I am quite new to SF development and as a frontend developer I am experiencing some striggles while taking over a project from a colleague who has just left his job. So please appologize any "stupid" beginner questions…
We are currently developing an APEX class and I need to access the parent container of a LWC component.
Let my element be like this:
<template for:each={objInfo.todoList} for:item='todoListItem' class="slds-p-top_medium">
<lightning-input
key={todoListItem.fieldName}
name={todoListItem.fieldName}
label={todoListItem.fieldLabel}
type={todoListItem.fieldType}
value={todoListItem.value}
disabled={todoListItem.disabledRes}
checked={todoListItem.value} >
</lightning-input>
</template>
Rendered output then is:
<lightning-input c-todolist_todolist="" class="slds-form-element" lightning-input_input-host="">
<span lightning-input_input="" data-aria="" class="slds-assistive-text"></span>
<div lightning-input_input="" class="slds-form-element__control slds-grow">
<span lightning-input_input="" class="slds-checkbox">
<input lightning-input_input="" type="checkbox" id="checkbox-10" name="Window Cleaning" value="">
<label lightning-input_input="" for="checkbox-10" class="slds-checkbox__label">
<span lightning-input_input="" class="slds-checkbox_faux"></span>
<span lightning-input_input="" class="slds-form-element__label">Window Cleaning</span>
</label>
</span>
</div>
</lightning-input>
Now I need to access the containing lightning-input element (which has the class ".slds-form-element") of each checkbox that is currently checked.
I was trying to reach this as follows:
for (let i = 0; i < this.objInfo.todoList.length; i++) {
if(this.objInfo.todoList[i].value==true) {
this.objInfo.todoList[i].closest('.slds-form-element').style.backgroundColor = 'green';
}
}
But the response is
Uncaught (in promise) TypeError: this.objInfo.todoList[e].closest is not a function
What am I doing wrong here?
console.log("Checked: " + this.objInfo.todoList[i].fieldName);
did work, but
this.objInfo.todoList[i].closest('.slds-form-element').style.backgroundColor = 'green';
does not.
Best Answer
EDIT
You can use a regular input, as it turns out:
Then in your css file (name syntax if it does not exist is: componentName.css):
That's it!