获取带有嵌套单选按钮的父输入div的ID，以便于访问。
获取带有嵌套单选按钮的父输入div的ID，以便于访问。
提问于 2019-10-21 22:15:23
我有一些定制的单选按钮，这些按钮都是大量嵌套的。我希望子单选按钮在标签中引用它们的父键(出于可访问性的原因)。我计划使用aria-labelledby来完成这个任务。
我最大的问题是单选按钮是动态生成的，所以我需要知道父id是什么。
当前，html的布局如下所示：
<div ...
<input id="cat" name="level-parent" type="radio" value="cat" />
<label for="cat" />
<div>
<div ...
<div ...
<div
<div ...
<input name="level-child-0" id=
leash" type="radio" value="leash">
<label />
<div ...
<div ...
<div ...
<input name="level-child-1" id=
"blue" type="radio" value="blue">
<label />
输入和标签都是由映射到的同一个组件生成的。
<input
type="radio"
name={`level-${level}`}
value={choiceId}
id={choiceId}
aria-labelledby={}
/>
<label htmlFor={choiceId} />
在创建单选按钮时，将传递choiceId和级别。
当屏幕阅读器读取标签时，我希望每个孩子都引用它的父标记。
因此，对于带有<input>的id="level-child-1"标签，它会说"leash，蓝色“，而对于id="level-child-0"的<input>标记，它会说，”猫，皮带“。
是否有获取父输入id的方法？我研究了使用类似于const parentInput = document.getElementById("label").parentNode.nodeName;的东西，但问题是我不知道父程序的id。它能向上移动节点直到找到父input组件的id吗？
下面是一个基本的操作，它使用一个工作的嵌套单选按钮：http://jsfiddle.net/wgoLxanc/，所以我至少已经弄清楚了这个概念。棘手的事情是弄清楚如何获得父id。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-23 16:25:03
要获取父元素的未知ID，请执行以下操作：
Vanilla Javascript:
一级以上：
document.querySelector("YOUR-ELEMENT-SELECTOR").parentNode.id;两个级别：
document.querySelector("YOUR-ELEMENT-SELECTOR").parentNode.parentNode.id;jQuery:
一级以上：
$("YOUR-ELEMENT-SELECTOR").parent().attr("id");两个级别：
$("YOUR-ELEMENT-SELECTOR").parent().parent().attr("id");Stack Overflow用户
发布于 2019-10-21 23:46:36
使用单选按钮中的数据属性保存父ID。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58494790
复制相关文章
相似问题
腾讯云开发者
