如何定位最后一个弹性项目

Question

我有一个 div 列表，可以是display:none或display:flex根据几个条件动态显示。

我如何检查，因为这是动态的，最后一个显示显示 flex 的 div 是什么？

我的代码是这样的：

<div class="container">
  <div style="display: flex"></div>
  <div style="display: none"></div>
  <div style="display: flex"></div>
   <div style="display: none"></div>
</div>

正如我所说，孩子们可能会或可能不会display:flex并且可能不一定按此顺序排列，或者可能比此更多的项目或没有。 我需要用display:flex识别最后一个项目，所以我用 javascript 应用了一个borderBottom 。

Answer 1

我需要用display:flex识别最后一个项目，所以我用 javascript 应用了一个borderBottom。

由于您有可用的js ，请考虑使用针对display: flex的 CSS 选择器：

div[style="display: flex"]

然后获取数组中的最后一项（例如：使用pop() ），这就是您要查找的项。

纯CSS这是不可能的。

 const e = [ ...document.querySelectorAll('div[style="display: flex"]') ].pop(); e.style.border = '1px solid red';

 <div class="container"> <div style="display: flex">a</div> <div style="display: none">b</div> <div style="display: flex">c</div> <div style="display: none">d</div> </div>

Answer 2

将您的样式更改为类

<div class="container">
  <div class="flex">a</div>
  <div class="none">b</div>
  <div class="flex">c</div>
</div>

通过类名获取它的函数

function le(){
const container = document.querySelector(".container")
const elements = container.getElementsByClassName("flex")
return elements.item((elements.length - 1))
}
console.log(le())

和一些CSS

.flex {
  display: flex
}

.none {
  display: none
}

Answer 3

这是一个最简单的解决方案

 $(".container").each(function() { $('div:visible:last', this).css("background","red"); });

 <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container"> <div style="display: flex">1</div> <div style="display: none">2</div> <div style="display: flex">3</div> <div style="display: none">4</div> </div> </body> </html>

如何定位最后一个弹性项目

问题描述

3 个解决方案

解决方案1
1 2022-05-24 09:07:25

解决方案2
0 2022-05-24 09:15:20

解决方案3
0 2022-05-24 09:18:21

如何定位最后一个弹性项目

问题描述

3 个解决方案

解决方案1 1 2022-05-24 09:07:25

解决方案2 0 2022-05-24 09:15:20

解决方案3 0 2022-05-24 09:18:21

解决方案1
1 2022-05-24 09:07:25

解决方案2
0 2022-05-24 09:15:20

解决方案3
0 2022-05-24 09:18:21