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

Posted 2023-02-22

【中文标题】jquery .each 仅适用于第一个元素

【英文标题】：jquery .each works only on the first element

【发布时间】：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...

【参考方案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);

);