jquery - jQuery脚本设置div高度似乎只运行一次然后停止

Question

我有四个 div，每个 div 具有相同的 ID 但不同的类。

<div id="inner" class="1"></div>
<div id="inner" class="2"></div>
<div id="inner" class="3"></div>
<div id="inner" class="4"></div>

然后我有一个 jQuery 脚本将 div 的高度设置为窗口的高度（加上一点点）

jQuery(document).ready(function($) {
var h = $(window).height();
$('#inner') .css({'height': h+100});

然而，这仅适用于 Div1，脚本似乎停止为接下来的 3 个 div 工作。有没有办法让它为所有 4 个 div 运行？

非常感谢

快速编辑我显然是新手，只需要一个快速的帮助，所以感谢那些给我时间给我一个我可以合作的答案的人，我真诚地向对这个问题投反对票的人道歉，如果它是阅读是你的负担，你可能只是不读吗？

Answer 1

ID 必须是唯一的，使他们的 ID 是唯一的，否则调用 $("#inner") 将只返回第一个 div。

HTML：

<div class="inner 1"></div>
<div class="inner 2"></div>
<div class="inner 3"></div>
<div class="inner 4"></div>

Javascript：

jQuery(document).ready(function($) {
var h = $(window).height();
$('.inner') .css({'height': h+100});

Answer 2

用这个

<div id="one" class="inner"></div>
<div id="two" class="inner"></div>
<div id="three" class="inner"></div>
<div id="four" class="inner"></div>

jQuery(document).ready(function($) {
    var h = $(window).height();
    $('.inner').css({'height': h+100});

ID 必须是唯一的。

Answer 3

您的 id 标签不是语义的。一页上只能存在一个唯一的 ID 标签。您需要添加一个类似的类。

<div id="inner" class="1 inners"></div>
<div id="inner2" class="2 inners"></div>
<div id="inner3" class="3 inners"></div>
<div id="inner4" class="4 inners"></div>

jQuery(document).ready(function($) {
   var h = $(window).height();
   $('.inners') .css({'height': h+100});
}