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

【问题标题】：jquery .each works only on the first elementjquery .each 仅适用于第一个元素
【发布时间】：2012-06-12 12:47:42
【问题描述】：

我无法理解 jquery .each。我有以下代码：

$('#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 代码我做错了什么？

【问题讨论】：

一个ID在整个页面中应该是唯一的，你观察到的行为是完全正常的。
你的 HTML 无效 :) 重复 id
修复多个元素具有相同 ID 的问题，然后尝试在一个类上使用 $.each，例如$('.inner').each(function...

标签： jquery html loops indexing each

【解决方案1】：

您不能对不同的元素使用相同的#id。尝试重命名其余的，你会得到你想要的结果

或者这样做（无需添加任何类即可工作 - 更简洁的代码）

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

【讨论】：

我没有为我选择的任何元素设置 id。就我而言，将 domEle 添加到我的函数中就可以了。谢谢

【解决方案2】：

id 选择器最多返回一个元素。

你不应该有多个具有相同 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')...

【讨论】：

facepalm 不敢相信我忘了那个 xD 谢谢 :)
@Skye。请不要使用我的属性选择器解决方法。它仍然是无效的 HTML。
不用担心。 testDivs 正在添加 jq 所以它是一个快速修复

【解决方案3】：

each 方法没有问题。您为多个元素指定了相同的id，这是不受支持的。

改用一个类，你可以找到所有的元素。

演示：http://jsfiddle.net/Guffa/xaL4n/

【讨论】：

【解决方案4】：

您的 html 无效。 ID 必须是唯一的。您应该将id="testDiv" 更改为class="testDiv"

HTML：

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

Javascript：

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

【讨论】：

【解决方案5】：

您不能在 html 页面中指定相同的 div id。

<div id="testDiv"></div>

其实，试试

<div class="testDiv"></div>

你的函数应该是这样的

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

});

【讨论】：