jquery - jQuery .each() 无法识别所有元素。

Question

所以我有我的基于网格的布局：

<div id="gridrow" class="clear">
<div id="gridsection" class="float-left">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>
<div id="gridsection" class="float-right">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>
<div id="gridsection" class="gridmiddle">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>

然后我有这个 jQuery 脚本：

$("#gridtitle").each(function(index){
    $("#gridtitle:eq("+index+")").click(function (){
        $("#gridimage:eq("+index+"), #gridinfo:eq("+index+")").slideToggle();
    });
});

我认为这会起作用（合乎逻辑）但是，只有第一个网格元素会起作用，有什么提示吗？

欲了解更多信息，请随时询问，

谢谢。

Answer 1

不同的元素必须有不同的 ID。

如果两个或多个元素具有相同的 ID，则仅使用第一个。

Answer 2

ID 是唯一的，每个对象只能使用一个。您可以改用分类，并更改选择器：

$(".gridtitle").each(function(index){
    $(".gridtitle:eq("+index+")").click(function (){
        $(".gridimage:eq("+index+"),.gridinfo:eq("+index+")").slideToggle();
    });
});​

Answer 3

那是因为gridtitle是一个id. 您应该改为将其更改为 aclass并像这样选择它：

$(".gridtitle").each(function() { ... });