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

Question

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>

我想使用 filter 方法重新组合所有 p 的每个 li，但该函数一直运行异常。

// 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, li, li, li, li]

我很久以前就用过这样的过滤器，但出于某种原因它不再起作用了。

我是不是漏掉了什么？

Answer 1

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

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

Answer 2

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); returns wrap.children 中的元素数组，其中 .firstChildElement returns true.

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

filter for regrouping elements won't work

html

javascript

arrays

element

filter