如何检测设置display:flex的最后一个DOM子元素？

在给容器内的元素分别设置display:flex或display:none后，要找到其中最后一个应用了display:flex的元素（比如示例中的内容为B的div），可以参考以下几种实现思路：

思路一：从后往前遍历数组，匹配第一个符合条件的元素 #

利用数组的findLast方法（ES2022+支持）直接从数组末尾开始查找，第一个匹配到display:flex的元素就是目标元素；如果需要兼容旧环境，可以复制数组并反转后用find方法：

// 现代环境写法
const lastFlexItem = listArray.findLast(item => item.style.display === 'flex');

// 兼容旧环境写法
const lastFlexItemFallback = [...listArray].reverse().find(item => item.style.display === 'flex');

思路二：先过滤所有符合条件的元素，再取最后一个 #

先通过filter筛选出所有设置了display:flex的元素，再取筛选后数组的最后一项：

const flexItems = listArray.filter(item => item.style.display === 'flex');
// 两种取最后一项的方式
const lastFlexItem = flexItems[flexItems.length - 1];
// 或用ES2022的at方法更简洁
const lastFlexItem = flexItems.at(-1);

思路三：直接用DOM选择器查询 #

如果元素的display:flex是通过内联样式设置的，可以直接用CSS属性选择器结合:last-of-type来查找：

const lastFlexItem = containerDiv.querySelector('.item[style*="display:flex"]:last-of-type');

通用扩展：适配非内联样式的场景 #

如果元素的display属性是通过CSS类而不是内联样式设置的，需要用getComputedStyle获取实际生效的样式来判断：

const lastFlexItem = listArray.findLast(item => {
  const computedStyle = window.getComputedStyle(item);
  return computedStyle.display === 'flex';
});

内容的提问来源于stack exchange，提问作者RandomDeveloper