Как сократить код JS?

Question

[Роберт Плант]

Имеются классы value1, value2, value3 ... value100500. Меняется только цифра у value.
Как сократить код?

function ready() {
		document.querySelectorAll(`.value1 [class^=line]`).forEach(div => {
			document.querySelector(`.value1 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value2 [class^=line]`).forEach(div => {
			document.querySelector(`.value2 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value3 [class^=line]`).forEach(div => {
			document.querySelector(`.value3 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value4 [class^=line]`).forEach(div => {
			document.querySelector(`.value4 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value5 [class^=line]`).forEach(div => {
			document.querySelector(`.value5 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value6 [class^=line]`).forEach(div => {
			document.querySelector(`.value6 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value7 [class^=line]`).forEach(div => {
			document.querySelector(`.value7 .${div.className}`).classList.add('visible');
		});
	}

Comments

[iBird Rose]

ну раз костыляешь - то оберни свой forEach в еще один цикл, в котором и будут эти индексы прогоняться. а в value вставляй переменной. типа .value${i}

[WbICHA]

Василий Банников, Daniil Vasilyev,
Господа, может я упоролся, но разве эта всратая конструкция:

document.querySelectorAll(`.value1 [class^=line]`).forEach(div => {
      document.querySelector(`.value1 .${div.className}`).classList.add('visible');
    });

не равнозначна этой?

document.querySelectorAll(`.value1 [class^=line]`).forEach(div => {
      div.classList.add('visible');
    });

ТС же ищет то, что уже нашёл, разве нет?

[Василий Банников]

WbICHA, мне тоже так показалось. Но тк я не уверен, что лежит в className - не стал переделывать.

[WbICHA]

Василий Банников, дык там неважно, что лежит, конструкция ТСа найдёт ту же ноду, что у него есть, там нету опция найти чт-то другое.

Answer 1

[Василий Банников]

function ready() {
  for(let i = 1; i <= 7; i++) {
    makeVisible("value" + i);
  }
}
function makeVisible(selector) {
    document.querySelectorAll('.'+selector+" [class^=line]").forEach(div => {
      document.querySelector(`.${selector} .${div.className}`).classList.add('visible');
    });
}

Но вообще код странный

Answer 2

[Daniil Vasilyev]

for (let i = 1; i <= 7; i++ ) {
  document.querySelectorAll(`.value${i} [class^=line]`).forEach(div => {
    document.querySelector(`.value${i} .${div.className}`).classList.add('visible');
  });
}

Answer 3

[Tim]

Слишком мало информации. Не понятно, что вы пытаетесь сделать. Лучше конечно залить демку и объяснить. Я не понимаю зачем нужно использовать столько циклов. Если добавление класса зависит от родителя , то можно примерно так сократить:

document.querySelectorAll(`[class^=line]`).forEach((item, i) => {
   const parent = item.closest(`.value${i + 1}`);
   if (i < 7 && parent) {
     item.classList.add('visible');
   }
 })

Опять таки может быть много подводных камней. Поэтому лучше описать более подробно