使用嵌套单选按钮获取父输入 div 的 ID 以实现可访问性

Question

我有一些高度嵌套的自定义单选按钮。 我希望子单选按钮在 label 中引用其父级（出于可访问性原因）。 我打算使用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 和 level。

当屏幕阅读器读取 label 时，我希望每个孩子都参考其父母。

因此，对于id="level-child-1"的<input>标签，它会说“leash, blue”，而对于id="level-child-0"的<input>标签，它会说，“cat, leash "

有没有办法获取父输入ID？ 我研究过使用类似const parentInput = document.getElementById("label").parentNode.nodeName; 但问题是我不知道父母的身份。 它可以在节点上 go 直到找到父input组件的 id 吗？

这是一个带有工作嵌套单选按钮的基本 jsfiddle： http://jsfiddle.net/wgoLxanc/所以我至少弄清楚了这个概念。 棘手的事情是弄清楚如何获取父ID。

Answer 1

获取父元素的未知 ID：

香草 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");

Answer 2

使用单选按钮中的数据属性来保存父 ID。

请参阅： 如何获取父 div 数据属性 javascript