【发布时间】:2013-03-25 00:56:43
【问题描述】:
假设我的 HTML 中有以下元素:
<div class="container">
<div class="box first">I have a height of 100</div>
<div class="box">I have a height of 200</div>
<div class="box last">I have a height of 300</div>
</div>
<div class="container">
<div class="box first">I have a height of 50</div>
<div class="box">I have a height of 60</div>
<div class="box last">I have a height of 40</div>
</div>
设置每个盒子的高度以匹配其容器内最高的盒子的正确逻辑是什么?
我的想法是这样的:
- 对于文档中的每个元素,检查它是否具有“容器”类
- 对于“容器”的每个子元素,检查它是否具有“盒子”类
- 如果是,则将其引用添加到数组并将其高度与包含最后检查元素高度的变量进行比较,如果大于则将其分配给变量
- 将数组中每个元素的高度设置为高度的值
...我在这里走对路了吗?
【问题讨论】:
-
使用
getElementsBy…(在您的情况下是类选择器)而不是“为每个元素检查...”。 -
如果您尝试通过 JavaScript 设置高度,我认为您的做法并不正确 - 使用纯 CSS 应该是可能的。你想达到什么目的?
-
我认为你们没有抓住重点。如果我使用 getEelementsBy... 选择文档中的所有元素,那么它们将 all 被分配文档中最高元素的高度。这不是目标。目标是让第一个容器中的所有 3 个盒子的高度相同(即该容器中最高盒子的高度)等等......
-
@bernk:我没有说你应该在文档的上下文中选择它们。首先,使用
containers = document.getElementsByClassName("container");,然后使用children = containers[i].getElementsByClassName("box")。 -
@PrasathK:所有三个 div 都有
box类,第一个和最后一个还有其他类,我们在这里无关紧要。
标签: javascript recursion iteration