【问题标题】:Am I taking the right direction with the logic?我的逻辑方向是否正确?
【发布时间】: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>

设置每个盒子的高度以匹配其容器内最高的盒子的正确逻辑是什么?

我的想法是这样的:

  1. 对于文档中的每个元素,检查它是否具有“容器”类
  2. 对于“容器”的每个子元素,检查它是否具有“盒子”类
  3. 如果是,则将其引用添加到数组并将其高度与包含最后检查元素高度的变量进行比较,如果大于则将其分配给变量
  4. 将数组中每个元素的高度设置为高度的值

...我在这里走对路了吗?

【问题讨论】:

  • 使用getElementsBy…(在您的情况下是类选择器)而不是“为每个元素检查...”。
  • 如果您尝试通过 JavaScript 设置高度,我认为您的做法并不正确 - 使用纯 CSS 应该是可能的。你想达到什么目的?
  • 我认为你们没有抓住重点。如果我使用 getEelementsBy... 选择文档中的所有元素,那么它们将 all 被分配文档中最高元素的高度。这不是目标。目标是让第一个容器中的所有 3 个盒子的高度相同(即该容器中最高盒子的高度)等等......
  • @bernk:我没有说你应该在文档的上下文中选择它们。首先,使用containers = document.getElementsByClassName("container");,然后使用children = containers[i].getElementsByClassName("box")
  • @PrasathK:所有三个 div 都有 box 类,第一个和最后一个还有其他类,我们在这里无关紧要。

标签: javascript recursion iteration


【解决方案1】:

看看这个..

  1. 获取类名为“容器”的元素

    var container = document.getElementsByClassName('container');
    
  2. 对于每个容器

    1. 使用 'div' 元素获取

      var box_div = container[index].getElementsByTagName('div');
      

      var box_div = container[index].getElementsByClassName('box');
      
    2. 检查 div 的最大高度

    3. 为所有其他 div 设置最大高度

【讨论】:

  • 感谢您的编辑.. 直到现在,我还在想类名 box first,box 和 box last 是不同的类名,然后才知道它们是 box 类的附加类.. 我学会了这个在这里..检查我编辑的帖子
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-07-10
  • 1970-01-01
  • 2011-08-22
  • 2019-09-05
  • 2013-01-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多