Где (зачем) применяется такой цикл?

Question

[Shimpanze]

Здравствуйте!

Напишите, пожалуйста, почему (зачем) и где применяется вот такой совмещенный цикл:

document.querySelectorAll('.post').forEach(e => {
  for(let i = e.length; i--;) {
    ...
  }
});

Зачем здесь 2 цикла «forEach» и «for»?

Спасибо!

Comments

[dandropov95]

Shimpanze forEach для того чтобы перебрать коллекцию последовательно с шагом 1 в прямом порядке. (можно заменить на любой цикл с подобной реализацией).
Внутренний for для того чтобы можно было перебрать коллекцию в обратном порядке (но и i тогда нужно инициализировать e.length - 1 если данная переменная будет использоваться как индекс коллекции).
Данный же пример приведенный вами не полный, да и работать он не будет.

<ul>
  <li>1.1</li>
  <li>1.2</li>
  <li>1.3</li>
  <li>1.4</li>
  <li>1.5</li>
</ul>
<ul>
  <li>2.1</li>
  <li>2.2</li>
  <li>2.3</li>
  <li>2.4</li>
  <li>2.5</li>
</ul>
<ul>
  <li>3.1</li>
  <li>3.2</li>
  <li>3.3</li>
  <li>3.4</li>
  <li>3.5</li>
</ul>

const uls = document.querySelectorAll("ul");

uls.forEach(ul => {
	let lis = ul.querySelectorAll("li");

	for (let i = lis.length - 1; i >= 0; i--) {
  	console.log(lis[i]);
  }
  
  console.log("------------------");
});

// <li>1.5</li>
// <li>1.4</li>
// <li>1.3</li>
// <li>1.2</li>
// <li>1.1</li>
// ------------------
// <li>2.5</li>
// <li>2.4</li>
// <li>2.3</li>
// <li>2.2</li>
// <li>2.1</li>
// ------------------
// <li>3.5</li>
// <li>3.4</li>
// <li>3.3</li>
// <li>3.2</li>
// <li>3.1</li>
// ------------------

PS. Не понятно только для чего такое может понадобиться в реальном проекте. Пример чисто синтетический

[Shimpanze]

dandropov95, Вот же пример, смотрите:

document.querySelectorAll('.post *').forEach(e => {
  for (let i = e.attributes.length; i--;) {
    if (e.attributes[i].nodeName !== 'href') {
      e.removeAttributeNode(e.attributes[i]);
    }
  }
});

Это может понадобиться, чтобы удалить все атрибуты у всех элементов на странице (кроме, конечно, «href»).

[dandropov95]

Shimpanze,
Ваш пример не будет работать...
Используется только for если вас это смущало

const elements = document.querySelectorAll(".post *");

for (let i = 0; i < elements.length; i++) {
  let element = elements[i];

  if (element.hasAttributes()) {
    let attributes = element.attributes;
  
    for (let i = 0; i < attributes.length; i++) {
      if (attributes[i].name !== "href") { 
        element.removeAttribute(attributes[i].name);
      }
    }
  }
}

Answer 1

[Stalker_RED]

Нигде не применяется, он не работает.
В переменной e ссылка на DOM-элемент, а у них нет свойства length, и потому i = undefined и внутренний цикл не работает.

Можно конечно сделать что-то этакое: jsfiddle.net/89ao1hns
Но это слишком темное колдунство, не надо так.

Comments

[Никита Егоров]

Скорей всего автор вопроса убрал примерно это: e = e.children

[Stalker_RED]

Никита Егоров, Хрустальный шар в ремонте :)

[Shimpanze]

Вот же пример, смотрите:

document.querySelectorAll('.post *').forEach(e => {
  for (let i = e.attributes.length; i--;) {
    if (e.attributes[i].nodeName !== 'href') {
      e.removeAttributeNode(e.attributes[i]);
    }
  }
});

Это может понадобиться, чтобы удалить все атрибуты у всех элементов на странице (кроме, конечно, «href»).

[Никита Егоров]

Shimpanze, ахахх, зачем вы удалили обращание к атрибутам элемента? Посчитали не нужным?

[Shimpanze]

Никита Егоров, О чём вы?

[LS Timer]

Shimpanze, for (let i = e.attributes.length; i--;)

[Сергей delphinpro]

Shimpanze, у вас в вопросе совсем другой пример
Это две большие разницы.

[Stalker_RED]

Shimpanze, вот в этом примере вложенный for перебирает атрибуты элемента в обратном порядке и удаляет все кроме href.

Answer 2

[Сергей delphinpro]

На первый взгляд это хрень какая-то.
На выходе querySelectorAll — коллекция html элементов
HTMLElement даже свойства length не имеет

Вы где это взяли?