Как можно отфильтровать элементы в списке li с использованием массива JavaScript?

Question

Рэй

html , javascript

Как можно отфильтровать элементы в списке li с использованием массива JavaScript?

Как отфильтровать элементы <li> в <ul>, у которых классы соответствуют ключам массива и значение тега <p> равно значениям в массиве JavaScript?

29 сентября 2023 г. 9:17

Ответы на вопрос 2

Похожие вопросы

Answer 1

Вы можете использовать методы JavaScript для фильтрации элементов списка <li> на основе массива ключей и значений.

Вот пример, который показывает, как это можно сделать:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Фильтрация элементов списка с использованием JavaScript</title>
</head>
<body>
  <ul>
    <li class="class1"><p>Значение 1</p></li>
    <li class="class2"><p>Значение 2</p></li>
    <li class="class3"><p>Значение 3</p></li>
    <li class="class2"><p>Значение 4</p></li>
  </ul>

  <script>
    // Создаем массив ключей и значений
    var filters = {
      "class1": "Значение 1",
      "class2": "Значение 2"
    };

    // Получаем список элементов <li>
    var liElements = document.querySelectorAll("li");

    // Проходимся по каждому элементу списка
    for (var i = 0; i < liElements.length; i++) {
      var liElement = liElements[i];
      var classValue = liElement.getAttribute("class");
      var pValue = liElement.querySelector("p").textContent;

      // Проверяем, соответствуют ли ключи и значения элемента списку
      if (filters[classValue] === pValue) {
        liElement.style.display = "block";
      } else {
        liElement.style.display = "none";
      }
    }
  </script>
</body>
</html>
```

В этом примере мы создаем объект `filters`, который содержит ключи классов элементов списка и значения тега `<p>`. Затем мы используем метод `querySelectorAll()` для получения всех элементов `<li>`. Затем мы проходимся по каждому элементу списка и проверяем, соответствуют ли ключи и значения элемента списку ключам и значениям в массиве `filters`. Если они соответствуют, то мы устанавливаем свойство `display` элемента `<li>` равным `"block"`, чтобы показать его, в противном случае мы устанавливаем его равным `"none"`, чтобы скрыть его.

Примечание: Замените "Значение 1" и "Значение 2" на свои собственные значения ключей и значений в массиве `filters`.

Answer 2

const li = Array.prototype.filter.call(
  document.querySelector('ul').children,
  function(n) {
    return this.every(([ key, value ]) => n.querySelector(`.${key}`).innerText === value);
  },
  Object.entries(items)
);