用于重新组合元素的过滤器将不起作用

如何解决用于重新组合元素的过滤器将不起作用

let wrap = document.querySelector(".wrap");
let temp = document.querySelector(".temp");
temp.addEventListener("click",(event) => {
  // returns pragraph of children[0]. Works fine.
  console.log(wrap.children[0].firstElementChild);

  // returns list of all lis,not pragraphs.
  let filtered = Array.from(wrap.children).filter(item => item.firstElementChild);
  console.log(filtered);
})

    <div>
      <ul class="wrap">
        <li>
          <p class="temp">outer 1</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 2</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 3</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 4</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 5</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 6</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 7</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
      </ul>
    </div>

我想使用 p 方法重新组合每个 li 中的所有 filter，但该函数一直在奇怪地工作。

// returns pragraph of children[0]. Works fine.
console.log(wrap.children[0].firstElementChild);

使用 .firstElementChild 检查单个段落效果非常好。但是，当我使用 filter() 时，会发生这种情况：

// returns list of all lis,not pragraphs.
let filtered = Array.from(wrap.children).filter(item => item.firstElementChild);
// result: temp.js:5 (7) [li,li,li]

我很久以前就使用过这样的过滤器，但有些原因它不再起作用了。

我错过了什么吗？

解决方法

您需要使用 map() 而不是 filter()

let filtered = Array.from(wrap.children).map(item => item.firstElementChild);

,

Array.from() 免费为您提供 map()。 (Array.from(arrayLike [,mapFn [,thisArg]]))

let filtered = Array.from(wrap.children,item => item.firstElementChild);

---

filter() 期望从回调中返回一个布尔值，并在 true 时包含正在迭代的元素，或者在 false 时省略它。

您的调用 Array.from(wrap.children).filter(item => item.firstElementChild); 返回 wrap.children 中的元素数组，其中 .firstChildElement 返回 true。