La idea que estoy tratando de hacer es, digamos que tengo algunos elementos DOM y quiero crear una función que acepte 2 matrices, una para los elementos y otra para los nombres de las clases. Cómo me aseguro de que el elemento en el índice 0, por ejemplo, solo tenga el nombre de clase que paso en el índice 0 de la otra matriz.
Aquí hay una imagen de lo que estoy tratando de hacer.
function addClassName(arrOfElements, arrOfClassNames) { // Here is what ive tested arrOfElements.forEach((el) => { el.classList.add(arrOfClassNames); }); }Resultado Esperado
addClassName([el1, el2], ["class-for-el1", "class-for-el2"] console.log(el1.classList); // Result: "class-for-el1" console.log(el2.classList); // Result: "class-for-el2" <div class="class-for-el1"></div> <div class="class-for-el2"></div>lo que obtengo en su lugar
console.log(el1.classList); // Result: "class-for-el1", "class-for-el2" console.log(el2.classList); // Result: "class-for-el2", "class-for-el2" <div class="class-for-el1 class-for-el2"></div> <div class="class-for-el1 class-for-el2"></div>Si el número de elementos de arrOfElements y arrOfClassNames es el mismo, puede hacer algo como:
function addClassName(arrOfElements, arrOfClassNames) { // Here is what ive tested arrOfElements.forEach((el, index) => { el.classList.add(arrOfClassNames[index]); }); }La devolución de llamada de Array.prototype.forEach() le brinda dos parámetros, el primero es el elemento en sí y el segundo es su índice, puede usar esta propiedad para lograr lo que quería de esta manera
const el1 = document.getElementById('1'), el2 = document.getElementById('2'); function addClassName(arrOfElements, arrOfClassNames) { arrOfElements.forEach((el, index) => { el.classList.add(arrOfClassNames[index]); }); } addClassName([el1, el2], ['test', 'test1']); console.log(`class for el1 - ${el1.className}\n`); console.log(`class for el2 - ${el2.className}`); <div id="1"></div> <div id="2"></div>Simplemente puede usar el index de matriz para obtener el nombre de la clase y agregarlo
el.classList.add(arrOfClassNames[i]);Nota: hay 3 argumentos que se pasan a la función de devolución de llamada
1) elemento: el current element se procesa en la matriz.
2) índice (opcional): el index del elemento en la matriz.
3) matriz (opcional): se invocó la array forEach().
function addClassName(arrOfElements, arrOfClassNames) { // Here is what ive tested arrOfElements.forEach((el, i) => { el.classList.add(arrOfClassNames[i]); }); } const [el1, el2] = document.querySelectorAll("div"); addClassName([el1, el2], ["class-for-el1", "class-for-el2"]); console.log(el1.classList); // Result: "class-for-el1" console.log(el2.classList); // Result: "class-for-el2" <div>First</div> <div> second </div>