This.template.queryLocatorAll not working inside Template if

Question

I have been trying to set background-image to divs inside Template iteration in LWC component. But when I am trying to locate divs using this.template.queryLocatorAll, I am not getting any Divs. Is it because they are inside Template iteration. If so then how can I locate these elements and set background images to these divs?

Here is my HTML code:

<div class="slideshow-container">
    <template for:each="{result}" for:item="res">
        <div class="mySlides fade" key="{res.id}">
            <div data-id="{res.Id}" class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <div>
                    {res.Id} {res.Comments__c}
                </div>
            </div>
        </div>
    </template>
</div>

and here is my JS code:

const divs = this.template.querySelectorAll('div');
for (var i = 0; i < this.result.length; i++) {
  const target = this.template.querySelectorAll('[data-id=' + this.result[i].id + ']');
  console.log('target' + target.length);
}
if (divs) {
  console.log('divs' + divs.length);
  for (var i = 0; i < divs.length; i++) {
    this.result.map((res) => {

      const div = Object.values(divs).filter(res => (res.getAttribute('data-id') === res.Id))[i];
      div.style.backgroundImage = 'url()';
    });
  }
}

Any help will be appreciated.

Answer 1

There are a lot of syntax errors and unnecessary loops in your sample code. Here is a sample code which will help you understand and achieve what you are trying to do

example.html

<template>
    <div class="slideshow-container">
        <template for:each={result} for:item="res" for:index="index">
            <div class="mySlides fade" key={res.Id}>
                <div data-index={index} 
                     class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                    <div>
                        {res.Id} {res.Comments__c}
                    </div>
                </div>
            </div>
        </template>
        <lightning-button onclick={addStyle} label="Add style"></lightning-button>
    </div>
</template>

example.js

import { LightningElement } from 'lwc';

export default class Example extends LightningElement {
    result = [
        {
            Id: 1,
            color: "red",
            Comments__c: "my comment 1"
        },
        {
            Id: 2,
            color: "green",
            Comments__c: "my comment 2"
        },
        {
            Id: 3,
            color: "blue",
            Comments__c: "my comment 3"
        },
        {
            Id: 4,
            color: "pink",
            Comments__c: "my comment 4"
        }
    ];

    addStyle() {
        const divs = this.template.querySelectorAll('.slds-box');
        Array.from(divs).forEach(div => {
            const index = Number(div.getAttribute("data-index"));
            
            // Note: change this to whatever property you want
            div.style.backgroundColor = this.result[index].color;
        });
    }
}