計算每個網格行中的列數 - Javascript

Question

是否可以計算每個網格行中的列？ 行可以是動態的。

Row 1
<div class="grid">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

<br />

Row 2
<div class="grid">
  <div class="column">1</div>
  <div class="column">2</div>
</div>

Stackblitz： https://stackblitz.com/edit/js-1hzwpx?file=index.html

Answer 1

使用querySelectorAll到 select 所有具有 class column的元素，然后獲取NodeList 的長度：

 const columns = document.querySelectorAll('.grid.column').length console.log(columns)

 <div class="grid"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>

Answer 2

這是一個解決方案，我在第一個網格標簽中添加了一個 id：

Row 1
<div class="grid" id="grid-1">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

const grid1 = document.getElementById('grid-1');

// logs the number of columns in the first grid
console.log(grid1.children.length)

只需根據您的需要進行調整。