我有一個 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我需要borderBottom用 javascript來識別最后一項。
uj5u.com熱心網友回復：
我需要識別最后一個專案，
display:flex所以我使用 javascript 應用了一個borderBottom。
既然你有js可用，請考慮使用針對以下內容的 CSS 選擇器display: flex：
div[style="display: flex"]
然后獲取陣列中的最后一項（例如： using 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>uj5u.com熱心網友回復：
將您的樣式更改為類
<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
}
uj5u.com熱心網友回復：
這是一個最簡單的解決方案
$(".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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/480853.html
標籤：javascript html
上一篇：如何為不同的布局重用點擊監聽器