I've been messing around with a wp plugin that is missing some classes and stuff, and I figured I could add them myself through a custom script. As you can see from the code I just selected a bunch of elements and I gave each one a unique classname that will later be used to add some css pseudo elements, but the best thing I could come up with is this long a55 statement lol If some of you know a better way, your help will be greatly appreciated!

This is an html snippet of my area of interest:

<div >
  <label for="fieldname6_1_rb7">
    <input
      aria-label="Van"
      name="fieldname6_1"
      id="fieldname6_1_rb7"
      
      value="489"
      vt="Van"
      type="radio"
    />
    <span>Van</span></label>
</div>

This is what my js looks like, which works as it is, but I'd like to know if there's a better way to write something like this..

const modelInputLabel = document.querySelectorAll(".side_by_side span");
for (let i = 0; i < modelInputLabel.length; i  ) {
  if (i === 0) {
    modelInputLabel[i].setAttribute("class", "test modelFirst");
  } else if (i === 1) {
    modelInputLabel[i].setAttribute("class", "test modelSecond");
  } else if (i === 2) {
    modelInputLabel[i].setAttribute("class", "test modelThird");
  } else if (i === 3) {
    modelInputLabel[i].setAttribute("class", "test modelFourth");
  } else if (i === 4) {
    modelInputLabel[i].setAttribute("class", "test modelFifth");
  } else if (i === 5) {
    modelInputLabel[i].setAttribute("class", "test modelSixth");
  } else if (i === 6) {
    modelInputLabel[i].setAttribute("class", "test modelSeventh");
  } else if (i === 7) {
    modelInputLabel[i].setAttribute("class", "test modelEight");
  }
}

CodePudding user response：

Using forEach and index

const classNames = ["test modelFirst",
"test modelSecond",
"test modelThird",
"test modelFourth",
"test modelFifth",
"test modelSixth",
"test modelSeventh",
"test modelEight"];

const modelInputLabel = document.querySelectorAll(".side_by_side span");

modelInputLabel.forEach((modelInput, index) => {
    modelInput.setAttribute("class", classNames[index]);
});

CodePudding user response：

An alternative way could be using some kind of Enum Object, such that order doesn't matter so much

const labelsEnum = Object.freeze({
  1: "modelFirst",
  2: "modelSecond",
  4: "modelFourth",
  3: "modelThird"
});

const modelInputLabel = document.querySelectorAll(".side_by_side span");

modelInputLabel.forEach((modelInput, index) => {
    modelInput.setAttribute("class", labelsEnum[index]);
});

Edit: This is just a different approach to the other answer provided

CodePudding user response：

I believe using switch is a good option, it will make your code cleaner and better.

const modelInputLabel = document.querySelectorAll(".side_by_side span");
for (let i = 0; i < modelInputLabel.length; i  ) {
  switch(i){
    case 0:
      modelInputLabel[i].setAttribute("class", "test modelFirst");
    case 1:
      modelInputLabel[i].setAttribute("class", "test modelSecond");
    case 2:
      modelInputLabel[i].setAttribute("class", "test modelThird");
    case 3:
      modelInputLabel[i].setAttribute("class", "test modelFourth");
    case 4:
      modelInputLabel[i].setAttribute("class", "test modelFifth");
    case 5:
      modelInputLabel[i].setAttribute("class", "test modelSixth");
    case 6:
      modelInputLabel[i].setAttribute("class", "test modelSeventh");
    case 7:
      modelInputLabel[i].setAttribute("class", "test modelEight");
  }
}

CodePudding user response：

I hope this is what you are looking for and can give you some ideas:

const modelInputLabel = document.querySelectorAll(".side_by_side span");
const attrClasses = {0:"test modelFirst", 1:"test modelSecond", 2:"test modelThird", 3:"test modelFourth", 4:"test modelFifth", 5:"test modelSixth", 6:"test modelSeventh", 7:"test modelEight"};
for (let i = 0; i < modelInputLabel.length; i  ) {
    // use setAttribute only if index/key is declared
    if (attrClasses[i]) modelInputLabel[i].setAttribute("class", attrClasses[i]);
}