获取 child ID 并添加到 parent 作为 ARIA 属性

Question

我在一个页面上有许多图像和标题，设置在 <figure><img><figcaption> 组中。我想使用 JavaScript（或 jQuery）获取 figcaption 的 ID，并向 parent 添加一个“aria-labelledby”属性 <figure>.

例如我有以下（简体）：

<figure id="figure1">
    <img src="x.jpg">
    <figcaption id="caption1">Sample</figcaption>
</figure>

<figure id="figure2">
    <img src="y.jpg">
    <figcaption id="caption2">Sample</figcaption>
</figure>

如何遍历每个元素并添加适当的 'aria-labelledby' 属性，例如 aria-labelledby="caption1"?

我试过了，但出现未定义函数错误：

$('figure').attr('aria-labelledby', function() {
    $(this).find('figcaption').attr('id');
})

感谢任何帮助。

谢谢

Answer 1

您需要 return 该值，否则您将无法对其进行任何操作。

$('figure').attr('aria-labelledby', function() {
    return $(this).find('figcaption').attr('id');
})

演示

$('figure').attr('aria-labelledby', function() {
  return $(this).find('figcaption').attr('id');
})

[aria-labelledby] {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure id="figure1">
    <img src="x.jpg">
    <figcaption id="caption1">Sample</figcaption>
</figure>

<figure id="figure2">
    <img src="y.jpg">
    <figcaption id="caption2">Sample</figcaption>
</figure>

获取 child ID 并添加到 parent 作为 ARIA 属性

Get child ID and add to parent as ARIA attribute

javascript

jquery

wai-aria