The idea I'm trying to do is, let's say I have some DOM elements and I want to create a function that accepts 2 arrays, one for the elements and another for the class names. How I make sure that element at index 0 for example only has the class name I pass at index 0 of the other array.

Here is a visual of what I'm trying to do

function addClassName(arrOfElements, arrOfClassNames) {
  // Here is what ive tested
  arrOfElements.forEach((el) => {
    el.classList.add(arrOfClassNames);
  });
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Expected Result

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

What i get instead

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If number of items of arrOfElements and arrOfClassNames is the same, you can do smthing like:

function addClassName(arrOfElements, arrOfClassNames) {
  // Here is what ive tested
  arrOfElements.forEach((el, index) => {
    el.classList.add(arrOfClassNames[index]);
  });
}

CodePudding user response：

Array.prototype.forEach() callback gives you two parameters, first one being the element itself and second one being its index, you can use this property to achieve what you wanted like this

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can simply use array index to get the class name and add it

el.classList.add(arrOfClassNames[i]);

Note: There are 3 arguments that are passed to the callback function

1) element: The current element being processed in the array.

2) index (Optional): The index of element in the array.

3) array (Optional): The array forEach() was called upon.

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>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>