Как отфильтровать элементы li по объекту?

Для фильтрации элементов li по объекту в JavaScript можно использовать методы массива, такие как filter() и includes(). Для начала, нужно получить все элементы li с помощью метода querySelectorAll(). Затем, с помощью метода filter() можно отфильтровать элементы в соответствии с заданными условиями.

Предположим, у нас есть следующий список:

<ul id="myList">
  <li data-category="fruits">Apple</li>
  <li data-category="fruits">Banana</li>
  <li data-category="vegetables">Carrot</li>
  <li data-category="fruits">Grapes</li>
  <li data-category="vegetables">Potato</li>
</ul>

И объект, по которому мы хотим отфильтровать элементы:

const filterObj = {
  fruits: true,
  vegetables: false
};

Теперь, используя JavaScript, мы можем написать следующий код, чтобы отфильтровать элементы списка на основе данного объекта:

const listItems = document.querySelectorAll('#myList li');

const filteredItems = Array.from(listItems).filter(item => {
  const category = item.dataset.category;
  return filterObj[category];
});

filteredItems.forEach(item => {
  item.style.display = 'block'; // или делайте что-то другое с отфильтрованными элементами
});

В этом примере мы используем метод querySelectorAll() для получения всех элементов li с id "myList". Затем мы преобразуем полученную коллекцию в массив с помощью Array.from(). Затем мы используем метод filter() массива для отфильтровывания элементов в соответствии с заданными условиями. В данном случае мы сравниваем значение ключа из объекта filterObj с атрибутом data-category каждого элемента.

Наконец, мы используем метод forEach() для применения изменений к отфильтрованным элементам. В этом примере мы устанавливаем стиль отображения display для каждого отфильтрованного элемента в значение 'block'.