jQuery .each()没有识别所有元素。

时间:2012-08-19 20:56:25

标签: jquery html each

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

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

我认为这会起作用(具有逻辑意义)然而,只有第一个网格元素可以工作,任何提示?

欲了解更多信息,请随时提出,

感谢。

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

那是因为gridtitleid。您应该将其更改为class并选择它:

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