循环遍历多个 div 并从每个 div 中提取每个输入值答案

【问题标题】：Looping through multiple divs and pulling each input value from each循环遍历多个 div 并从每个 div 中提取每个输入值
【发布时间】：2015-01-16 14:16:35
【问题描述】：

我创建了一个 html 页面，它将动态添加或删除输入，所有输入都在一个父 div 中，每个都有自己的 div 来单独确定每个。我有循环遍历并找到这些子 div 的逻辑，但是我似乎无法弄清楚如何从每个 div 中获取输入，即使我正在遍历所有子 div，也只能获取第一个子 div。

知道怎么做吗？

html:

<div id="volumeRateDiv">
<div id="volumeRateDivNew_0" class="volumeRateDivChild">
    <input id="kc_start" type="number" name="kc_start" maxlength="9" step="1" min="0" placeholder="0">
    <input id="volume_rate" type="number" name="volume_rate" maxlength="12" step=".0001" min="0" placeholder="0.0000">
    <input id="delete_VolumeRate" type="button" name="delete_VolumeRate" value="Delete" onclick="removeItem('volumeRateDivNew_0')">
</div>
<div id="volumeRateDivNew_1" class="volumeRateDivChild">
    <input id="kc_start" type="number" name="kc_start" maxlength="9" step="1" min="0" placeholder="0">
    <input id="volume_rate" type="number" name="volume_rate" maxlength="12" step=".0001" min="0" placeholder="0.0000">
    <input id="delete_VolumeRate" type="button" name="delete_VolumeRate" value="Delete" onclick="removeItem('volumeRateDivNew_1')">
</div>
</div>

Javascript：

var divs = document.getElementsByClassName("volumeRateDivChild");

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert (div.className+" - "+div.id+" - "+document.getElementById("kc_start").value );
}

【问题讨论】：

ID 的必须是唯一的...

标签： javascript html

【解决方案1】：

您可以在输入 ID 的末尾添加相同的索引号（0、1 等），然后在 for 循环中使用它，例如：

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert (div.className+" - "+div.id+" - "+document.getElementById("kc_start_" + i).value );
}

【讨论】：

我的问题是，我使用的是基于该名称的样式表，除非有办法为 kc_start* 或其他东西通配样式表，我从来没有这样做过。
没有像kc_start_这样的id元素
@DennisHepworth 澄清一下，您无法更改样式表或 html 吗？
div[id^="kc_start"] 将为您提供 id 以 kc_start 开头的 div 的 css 声明
我都可以改，只是学习样式表，所以不熟悉通配符类型的东西。我将进一步调查上述建议，并且理解应该是唯一的，但我认为它就像 xml，你有一个父母，你可以在不同的父母上使用相同的孩子名字。

【解决方案2】：

您回答中的第一条评论是正确的，所有 id 都应该是唯一的。

如果您可以确定要提取其值的输入始终是第一个孩子，那么您可以像 jsfiddle 那样做同样的事情

<div id="volumeRateDiv">
<div id="volumeRateDivNew_0" class="volumeRateDivChild">
    <input id="kc_start" type="number" name="kc_start" maxlength="9" step="1" min="0" placeholder="0" value="0"/>
        <input id="volume_rate" type="number" name="volume_rate" maxlength="12" step=".0001" min="0" placeholder="0.0000"/>
        <input id="delete_VolumeRate" type="button" name="delete_VolumeRate" value="Delete" onclick="removeItem('volumeRateDivNew_0')"/>
</div>
<div id="volumeRateDivNew_1" class="volumeRateDivChild">
    <input id="kc_start" type="number" name="kc_start" maxlength="9" step="1" min="0" placeholder="0" value="0"/>
    <input id="volume_rate" type="number" name="volume_rate" maxlength="12" step=".0001" min="0" placeholder="0.0000"/>
        <input id="delete_VolumeRate" type="button" name="delete_VolumeRate" value="Delete" onclick="removeItem('volumeRateDivNew_1')"/>
</div>
</div>

var divs = document.getElementsByClassName("volumeRateDivChild");

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert (div.className+" - "+div.id+" - "+div.children[0].value );
}

【讨论】：

遗憾的是它不是来自父 'volumeRateDiv' 的第一个孩子，这些孩子是动态添加/删除的，然后单击提交按钮需要让 javascript 阅读剩下的内容并继续数据库更新/添加等
上面的脚本采用“volumeRateDivChild”而不是“volumeRateDiv”的第一个子元素（在本例中是id为“kc_start”的输入）

【解决方案3】：

首先，正如@tymeJV 已经提到的，HTML 元素的 id 必须是唯一的。因此，如果您打算在其他任何地方使用它们（不是在这种情况下），您需要删除它们或使它们独一无二。

要在 div 中定位元素，您可以使用类或名称。您不仅可以在document 上调用getElementsByClassName 或getElementsByName，还可以在任何DOM 元素上调用。它可能看起来像这样：

var divs = document.getElementsByClassName("volumeRateDivChild");

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert(div.className+" - "+div.id+" - "+div.getElementsByName("kc_start")[0].value );
}

【讨论】：

【解决方案4】：

这样做

var divs = document.getElementsByClassName("volumeRateDivChild");

for(var i = 0; i < divs.length; i++)
{
    var div = divs[i];
    alert (div.className+" - "+div.id+" - "+div.children["kc_start"].value );
}

演示： Demo

【讨论】：