Добавить событие Click к каждому элементу для l oop, используя Vanilla JavaScript для доступа к индексу (i)

Question

Можете ли вы добавить функцию щелчка для каждого элемента l oop в для l oop? Можете ли вы добавить eventlistener в l oop для доступа к позиции i (индекс), или вам нужно запросить DOM, а затем использовать отдельный цикл / forEach. В настоящее время у меня есть это:

let dataTest = [
        {
            name: "John Doe",
            age: '40',
        },
        {
            name: "Johanna Doe",
            age: '40',
        },
        {
            name: "Doe Child 1", 
            age: '8',
        },
        {
            name: "Doe Child 2", 
            age: '6',
        },
        {
            name: "Doe Child 3", 
            age: '6',
        },
    ];

function insertLI() {
let html = '';
for (let i = 0; i < dataTest.length; i++) {
        let display = dataTest[i];
        console.log(i);
        html += `
            <li class='element' id="item-in-array-${i}" data-idx="${i}">${display.name}, ${display.age}</li>`;
    };
    ulElement.innerHTML = html;
    const elem = document.querySelectorAll('.element');
    elem.forEach(function(clickHandler) {
    clickHandler.addEventListener('click', function() {
        let buttonElem = document.createElement('BUTTON');
        buttonElem.setAttribute('class', 'removeButton');
        buttonElem.innerHTML = 'Remove button';
            if(typeof(buttonElem) != 'undefined' && buttonElem != null && !buttonElem.length){
                this.insertAdjacentElement('afterend', buttonElem);
            } else{
            alert('Element does not exist!');
            };
        });
    });
};
insertLI();

Я знаю, что могу это сделать:

const elem = document.querySelectorAll('.element');
let buttonElem = document.createElement('BUTTON');
buttonElem.setAttribute('class', 'removeButton');
buttonElem.innerHTML = 'Remove button';

for (let i = 0; i < elem.length; i++) {
    elem[i].addEventListener('click', function () {      
      console.log(this);
        elem[i].style.color = 'red';
        this.textContent = this.textContent.toUpperCase();
        if(typeof(buttonElem) != 'undefined' && buttonElem != null){
            this.insertAdjacentElement('afterend', buttonElem);
        } else{
            alert('Element does not exist!');
        }
    });
};

Answer 1

Это может звучать по умолчанию, но попробуйте JQuery. С помощью приведенного ниже кода вы можете выбрать все item-in-array-* элементы и для каждого из них создать обработчик событий.

$('[id*="item-in-array-"]').each(function () {
    $(this).click(function () {
        // do stuff
    }
}

Хотя на самом деле вам следует сделать именно это, поскольку вам не нужно создавать обработчики вручную.

$('[id*="item-in-array-"]').click(function () {
   // do stuff with this
}

Если есть элементы Dynami c, вы можете захотеть использовать делегирование:

$('parent-div').on('click', '[id*="item-in-array-"]', function () {
    // do stuff with this
    // This will be item-in-array still, not parent
}

Таким образом, независимо от того, добавляете ли вы новые элементы, вам не нужно назначать новые обработчики