Javascript Javascript使用有关父元素的信息获取子元素的ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27245606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript get ID of a child element using information about the parent
提问by user1578653
I have a div created using javascript.
我有一个使用 javascript 创建的 div。
The div has a varying number of child elements that are all check boxes.
div 具有不同数量的子元素，它们都是复选框。
I want to retrieve the id's of all the checkboxes using a loop.
我想使用循环检索所有复选框的 ID。
The div has been passed through into the class I am using, and has been called:
div 已传递到我正在使用的类中，并已调用：
oInput
I know this is working fine as I am able to retrieve the number of child elements that the div has, using the following line:
我知道这工作正常，因为我能够使用以下行检索 div 具有的子元素的数量：
oInput.childNodes.length
But my problem is I do not know how to retrieve the id of the child elements. All I want to do is to get the id's to display in an alert box for now.
但我的问题是我不知道如何检索子元素的 id。我现在想要做的就是让 ID 显示在警报框中。
So far I have:
到目前为止，我有：
for (var ii = 0; ii < oInput.childNodes.length; ii++)
{
var childId = oInput.childNodes[ii].id;
alert("Child " + childId);
}
But this is not the correct solution. I have searched around but there does not seem to be a clear answer to this question anywhere. I am only looking for a solution using javascript that will display the answer in the alert box in the loop.
但这不是正确的解决方案。我四处搜索，但似乎没有任何地方对这个问题有明确的答案。我只是在寻找使用 javascript 的解决方案，该解决方案将在循环的警报框中显示答案。
回答by user1578653
This works for me:
这对我有用：
<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>
If I put the 'script' tag in the header it didn't work because the page hadn't fully loaded and the div did not exist yet - perhaps that was your problem?
如果我将 'script' 标签放在标题中，它不起作用，因为页面没有完全加载并且 div 还不存在 - 也许那是你的问题？
Tested in Internet Explorer 11 and Chrome.
在 Internet Explorer 11 和 Chrome 中测试。
回答by TheNov
There are a few ways you can do this but the one I've found most reliable is using jQuery:
有几种方法可以做到这一点，但我发现最可靠的方法是使用 jQuery：
$("#myElementID").find("input[type='checkbox']").each(function (){
alert("Child " + $(this).attr('id'));
});
Alternatively, you can use your code, but just modifying it a bit:
或者，您可以使用您的代码，但只需稍微修改一下：
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);
}
}
}
回答by Suchit kumar
you can try this:
你可以试试这个：
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);
}
