VanillaJS-在容器中找到中間元素

所以我有這樣的設定

    <div class=“container”>
     <div class=“segment1”></div>
     <div class=“segment2”></div>
     <div class=“segment3”></div>
     .
     .
     .
     <div class=“segmentN”></div>
    </div>

其中 N 是用戶定義的數字，因此串列是動態的。對于容器，我已應用樣式將其顯示為網格，因此每個時間串列都顯示 3 個專案，串列是可滾動的。我的問題是，如何通過 VanillaJS 找到位于容器中間的元素？如果頁面中有3個元素，它應該選擇第二個，向下滾動時它應該每次選擇容器中間的元素，除了抓取它的id之外，還對其應用一些樣式。如果有 2 個元素，它也應該選擇第二個專案。我正在考慮檢查容器的高度，將其除以一半并檢查元素的位置是否在范圍內。到目前為止，我能夠在 js 中撰寫此代碼

function findMiddleSegment() {
    //selecting container
    const segmentListContainer = document.querySelector(`.segmentListContainer`);
    const rect = segmentListContainer.getBoundingClientRect();
    //selecting all divs
    const segments = document.querySelectorAll(`.segmentContainer`);
    segments.forEach( (segment) => {
        const location = segment.getBoundingClientRect();
        if( (location.top >= rect.height / 2) ){
            segment.classList.add(`midsegment`);
        } else {
            segment.classList.remove(`midsegment`);
        }        
    });
}

但它不起作用。它按應有的方式在中間找到元素，但也為中間段下方的每個其他元素應用樣式。我已經閱讀了有關 stackoverflow 的一些答案，但找不到如何解決我的問題的任何想法。

編輯 除了我的問題，我添加了額外的功能來展示我如何呼叫它。

function handleDOMChange() {
    findMiddleSegment(); //for "first run" when doc is loaded

    const segmentListContainer = document.querySelector(`.segmentListContainer`);
    segmentListContainer.addEventListener('scroll', findMiddleSegment);
}

uj5u.com熱心網友回復：

如果容器內部只有一個段串列，則計算元素的子元素并找到中間元素會更容易。

const segmentListContainer = document.querySelector(`.segmentListContainer`);
const midSegmentIndex = Math.floor(segmentListContainer.children.length / 2) - 1;
let midSegment = segmentListContaner.children[midSegmentIndex];

midSegment.classList.add('midsegment');

聚苯乙烯

您的代碼在真正的 midsegment 元素之后將 'mdsegment' 添加到每個元素的類名的原因是因為您撰寫了這條條件陳述句行。

if(location.top >= rect.height / 2){
    segment.classList.add(`midsegment`);
}

uj5u.com熱心網友回復：

像這樣的東西。你可以像我一樣使用 Math.round、Math.ceil 或 Math.floor。這是有效的，因為 querySelectorAll 回傳一個陣列，您可以使用 array.length 來計算陣列中專案的總數，然后使用 for 回圈遍歷所有段并根據 Math.(round, floor 或 ceil ) 根據您的需要。

const container = document.querySelector(".container");
const segments = container.querySelectorAll(".segment");
const middleSegment = Math.floor(segments.length / 2);
for (let index = 0; index < segments.length; index  ) {
    segments[middleSegment].classList.add("middle-segment");
}

.middle-segment{
  background-color: red;
}

<div class="container">
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
</div>

uj5u.com熱心網友回復：

您不需要為此使用 javascript。CSS會做

.container {
  width: 350px;
}

.container .segment {
  width: 100px;
  height: 100px;
  float: left;
  background-color: #EEE;
  border: 1px dotted gray;
  margin: 3px;
  text-align: center;
  color: silver;
}

.segment:nth-child(3n-1) {
  background-color: aquamarine;
  color: black;
}

<div class="container">
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
  <div class="segment">segment</div>
</div>

標籤：javascript html css

上一篇：云原生愛好者周刊：有一份 DevOps 修煉指南請您查收！

下一篇：將一個元素與其旁邊的另一個元素居中