使用父元素的信息获取子元素的ID，涉及到Javascript技术。

Question

使用父元素的信息获取子元素的ID，涉及到Javascript技术。

javascripthtmlparent-child

4

我有一个使用 JavaScript 创建的 div。

这个 div 有多个子元素，都是复选框。

我想使用循环来检索所有复选框的 ID。

这个 div 已经被传递到我正在使用的类中，并且已经被调用：

oInput

我知道这个程序工作得很好，因为我能够使用以下代码检索div元素的子元素数量：

oInput.childNodes.length

但我遇到的问题是不知道如何获取子元素的id。我现在只想在弹出框中显示这些id。

目前我所拥有的是：

for (var ii = 0; ii < oInput.childNodes.length; ii++)
        {
            var childId = oInput.childNodes[ii].id;
            alert("Child " + childId);
        }

但这不是正确的解决方案。我已经搜索过了，但似乎没有任何地方有清晰的答案。我只需要使用JavaScript编写一个循环，在弹出框中显示答案的解决方案。

- user3932611

3个回答

1

你可以尝试这个：

var oInput = document.getElementById('oInput');
for (var ii = 0; ii < oInput.childNodes.length; ii++)
{
    var childId = oInput.childNodes[ii].id;
   if(typeof(childId) !== 'undefined')
    alert("Child " + childId);
}

- Suchit kumar

@Alex 在你的代码中简单地使用 if(typeof(childId) !== 'undefined')。 - Suchit kumar

1

有几种方法可以做到这一点，但我发现最可靠的方法是使用jQuery：

$("#myElementID").find("input[type='checkbox']").each(function (){
  alert("Child " + $(this).attr('id'));
});

或者，您可以使用您的代码，但只需稍作修改：

for (var ii = 0; ii < oInput.childNodes.length; ii++)
{
    var currentChild = oInput.childNodes[ii];

    // this check is to make sure that the child you've selected is an input
    if (currentChild.tagName.toLowerCase() == "input"){

       // now you want to make sure you only retrieve the id's of checkboxes 
       if (currentChild.type.toLowerCase() == "checkbox"){

           var childId = oInput.childNodes[ii].id;
           alert("Child " + childId);
       }
    }
}

- TheNov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1578653 · Accepted Answer

这对我很有效：

<html>
<body>
<div id="oInput">
    <input id="1" type="text">
    <input id="2" type="text">
    <input id="3" type="text">
    <input id="4" type="text">
    <input id="5" type="text">
</div>
<script type="text/javascript">
    var oInput = document.getElementById('oInput'),
            oChild;
    for(i = 0; i < oInput.childNodes.length; i++){
        oChild = oInput.childNodes[i];
        if(oChild.nodeName == 'INPUT'){
            alert(oChild.id);
        }
    }
</script>
</body>
</html>

如果我将“script”标签放在头部，它不起作用，因为页面尚未完全加载，div尚不存在 - 也许这就是你的问题所在？已在Internet Explorer 11和Chrome中测试。