jquery .each仅适用于第一个元素

Question

我无法理解jqueries.每个.我有以下代码:

$('#testDiv').each(function(index, domEle){    
    $(this).text(index);
});

和以下HTML

<div id="p18">
    <div class="inner">
        <span>...</span>
        <p class="right">...</p>
        <div id="testDiv"></div>
    </div>
</div>
<div id="p19">
    <div class="inner">
        <span>...</span>
        <p class="right">...</p>
        <div id="testDiv"></div>
    </div>
</div>
<div id="p20">
    <div class="inner">
        <span>...</span>
        <p class="right">...</p>
        <div id="testDiv"></div>
    </div>
</div>

当脚本运行时,它仅适用于第一个testDiv,因为它正确地将文本设置为0,而不是其他testDivs.

我的总体目标是编写一个脚本,根据另一个div的高度设置div的高度.高度不同所以我认为循环结构是要走的路(除非我弄错了？)

我对jq代码做错了什么？

Answer 1

您不能#id对不同的元素使用相同的元素.尝试重命名其余部分,您将获得所需的结果

或者这样做(无需添加任何类即可工作 - 更干净的代码)

$('.inner div').each(function(index, domEle){    
    $(this).text(index);
});

Answer 2

id selector返回最多一个元素.

你永远不应该有多个具有相同id的元素.这是一个无效的HTML

这将有效,但您应该修改HTML:

$('div[id="testDiv"]')...

你应该做的是:

<div id="p18">
    <div class="inner">
        <span>...</span>
        <p class="right">...</p>
        <div class="testDiv"></div>
    </div>
</div>
<div id="p19">
    <div class="inner">
        <span>...</span>
        <p class="right">...</p>
        <div class="testDiv"></div>
    </div>
</div>

然后按类选择:

$('.testDiv')...