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});
}