Question

我已经创建了一个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 );
}

Answer 1

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

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

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

Answer 3

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

要在div中找到元素，可以使用类或名称。您不仅可以在getElementsByClassName上调用getElementsByName或document，还可以调用任何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 );
}

Answer 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

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

4 个答案: