Попытка изменить для l oop на метод фильтра однострочным в JavaScript

Question

Я пытался изменить for loop на filter() однострочник, но я получаю эту ошибку: (index):44 Uncaught TypeError: childrenElements.filter is not a function.

Фрагмент рабочего кода:

const parentElement = document.querySelector('.container');

let childrenElements = parentElement.children;

let results = [];

for(i = 0; i < childrenElements.length; i++){
  if( childrenElements[i].classList.contains('ui-widget')){
    results.push('ui-widget')
  }
}

Не работает фрагмент кода:

const parentElement = document.querySelector('.container');

let childrenElements = parentElement.children;

let results = [];

results = childrenElements.filter(childrenElement => childrenElement.classList.contains('ui-widget') )

Я думаю, это потому, что он не распознает childrenElements как array, но я не уверен как это исправить.

Вы можете найти демо здесь .

РЕДАКТИРОВАТЬ:

Окончательный фрагмент кода принятого ответа следующий:

const parentElement = document.querySelector('.container');

let childrenElements = parentElement.children;

let results = [];

results = [...childrenElements].map(childrenElement => childrenElement.classList );

console.log(results)

if (results[0].contains('ui-widget')) {
    alert('it has class')
}

Answer 1

Вы можете преобразовать ваш объект HTMLCollection в массив, используя оператор распространения, так что ваши данные будут повторяемыми:

results = [...childrenElements].filter(childrenElement => childrenElement.classList );

Однако, похоже, вы пытаетесь найти определенный класс в элементах , Для этого вы должны отобразить ваши элементы, чтобы создать массив массивов classList, а затем использовать contains для поиска искомого элемента.

results = [...childrenElements].map(childrenElement => childrenElement.classList );

if (results[0].contains('ui-widget')) {
    alert('it has class');
}

Answer 2

Причина в том, что childrenElements - это HTMLCollection, которое является перечисляемым, что означает, что вы можете получить доступ к его объектам, используя indexes . Например, childrenElements[0]

Однако он не предоставляет те же методы, которые предоставляет объект Array. Поэтому вам необходимо преобразовать его в массив с помощью:

Array.from(childrenElements)

Затем вы можете использовать все методы, предусмотренные для Array.

. Пожалуйста, помните, что если ваш список слишком велик, это может быть не самым эффективным способом, поскольку вы конвертируете свою коллекцию HTMLCol в массив, а затем повторяете цикл для фильтрации элементов.

Answer 3

Используйте эту функцию, чтобы превратить ее в массив

var realArray = Array.from(childrenElements);

Answer 4

В вашем коде childrenElements - это HTMLCollection, который является массивом как объект, а не массивом. Итак, вам просто нужно преобразовать это в массив, и он будет работать.

const parentElement = document.querySelector('.container');

let childrenElements = parentElement.children;
console.log(childrenElements)
let results = [];

// working code snippet - uncomment to test it
/* for(i = 0; i < childrenElements.length; i++){
  if( childrenElements[i].classList.contains('ui-widget')){
    results.push('ui-widget')
  }
}  

console.log(results) */

// not working code snippet
results = Array.from(childrenElements).filter(childrenElement => childrenElement.classList )

console.log(results)

if (results[0] === 'ui-widget') {
	alert('it has class')
}

<div class="container">
  
  <div class="ui-widget ui-widget-content widget-left">
    I am a ui-widget
  </div>
  <p class="paragraph">
  Hello Paragraph
  </p>
  <button class="btn">
   Close
  </button>
</div>