使用嵌套單選按鈕獲取父輸入 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