Javascript 一次更改具有相同ID类型的所有元素的高度

我有以下代码：

<div xmlns="http://www.w3.org/1999/xhtml"
    style="z-index: 1; position: absolute; top: 90px; left: 90px; background: none repeat scroll 0% 0% black; width: 800px;"
    id="mainDiv">
<div style="width: 405px;" class="floatLeft" id="mainDiv3">
<div style="width: 100%;" id="mainDiv31">
<div style="width: 107px; height: 100%;" class="floatLeft"
    id="mainDiv313"></div>

<div
    style="width: 2px; height: inherit; background-color: white; cursor: default;"
    class="floatLeft" id="mainDiv31_vertical"></div>

<div style="width: 296px; height: 100%;" class="floatLeft"
    id="mainDiv314"></div>
</div>

<div
    style="height: 2px; width: 100%; background-color: white; cursor: default;"
    id="mainDiv3_hotizontal"></div>

<div style="height: 311px; width: 100%;" id="mainDiv32"></div>
</div>

<div
    style="width: 2px; height: inherit; background-color: white; cursor: default;"
    class="floatLeft" id="mainDiv_vertical"></div>

<div style="width: 393px;" class="floatLeft" id="mainDiv4">
<div style="height: 456px; width: 100%;" id="mainDiv41"></div>

<div
    style="height: 2px; width: 100%; background-color: white; cursor: default;"
    id="mainDiv4_hotizontal"></div>

<div style="height: 142px; width: 100%;" id="mainDiv42"></div>
</div>
</div>

这意味着

div1

在更改

div11

height

div1\u vertical

height时会自动更改这3个div，而无需一些js或jquery我需要一些css属性 我没有提到div1上的任何高度，因此它会自动调整它的子对象

您可以使用jQuery执行此操作：

$("div[id$='_vertical']").height(function(){
  return $(this).parent().height();
});

---

但亲爱的上帝，你不应该。ID应该是唯一的和语义的，而不是描述属性。这就是上课的目的。改为使用class=“vertical”

设置id以

\u vertical

结尾的所有

div

元素，这应该可以实现以下功能：

$("div[id$='_vertical']").height(function(){
    return $(this).parent().height();
});

但是，在更改父级高度时，无法自动执行此操作，因为在DOM操作和变异时没有可绑定的事件

我也同意罗兰的观点，你不应该把

\u vertical

放在你的id中，而是作为一个单独的类

下面是一个使用CSS进行相对/绝对定位的示例，它可能适合您

CSS

div.vertical {
    position: relative;
}

div.vertical div {
    position: absolute;
    top: 0;
    bottom: 0;
}

HTML

<div id="mainDiv31" class="vertical">
    <div id="mainDiv313"></div>
</div>

我会简化布局并使用类。对于一些CSS3选择器，请看这里：我忘记在函数oops中包装我的父高度。但是你错过了一个结尾，哈！丹麦瑞典1-1@Jens啊，哈哈！实际上，括号在里面，但没有显示出来？！编辑：啊，一定是缓存问题。我看到你编辑了我的答案。谢谢当一个divs height增加时，它不会改变id末尾带有vertical的元素的高度，该divs height是的父元素的子元素vertical@Valun，我不确定我是否听懂了。是否要更改父对象或子对象的高度？您在问题中表示希望将新添加的子项的高度设置为其父项的高度，还是我误解了？在他的示例中，ID是唯一的，但我同意类更准确。我知道我们应该使用唯一的ID，我正在唯一地使用它们。但我以前并没有使用jQuery的强大功能，而是使用平面javascript，这就是为什么需要为这些特殊的div创建标识符的原因

<div id="mainDiv31" class="vertical">
    <div id="mainDiv313"></div>
</div>