Можно ли в jquery использовать цикл и увеличивать заданное значение на каждой итерации?

Question

[Алексей Чумаченко]

Добрый день. помогите пожалуйста в реализации следующей задачи.
есть общий див с вложенными дивами. сейчас каждому вложенному диву увеличиваю font-size используя
nth-child(n), вопрос в том можно ли как то через цикл пройтись по всем вложенным элементам и с каждым последующим проходом увеличивать font-size на 6px.
ссылка того как делаю сейчас https://jsfiddle.net/3kdnrchq/
хотелось бы увеличивать значения через цикл. большое спасибо за помощь.

Answer 1

[0xD34F]

Кому какое свойство надо назначить:

const selector = '.one .qwer';
const key = 'font-size';
const getVal = i => `${12 + i * 4}px`;

С jquery совсем всё просто: $(selector).css(key, getVal);.

Без - одно только получение элементов объёмнее выходит:

const elements = document.querySelectorAll(selector);

Ну а дальше варианты разные есть:

elements.forEach((n, i) => n.style[key] = getVal(i));

// или

for (const [ i, n ] of elements.entries()) {
  n.style.setProperty(key, getVal(i));
}

// или

(function next(i, n = elements.item(i)) {
  n && (n.style.cssText += key + ': ' + getVal(i), next(-~i));
})(0);

// или

for (let i = 0; i < elements.length; i++) {
  elements[i].setAttribute('style', key.concat(': ', getVal(i)));
}

Comments

[Алексей Чумаченко]

Огромное Вам спасибо