获取子代ID并添加为父代作为ARIA属性

Question

I have a number of images and captions on a page, set up in <figure><img><figcaption> groups. I'd like to use JavaScript (or jQuery) to grab the ID of the figcaption and add an ' aria-labelledby ' attribute to the parent <figure> .

For example, I have the following (simplified):

<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>

How can I loop through each element and add the appropriate 'aria-labelledby' attribute, eg, aria-labelledby="caption1" ?

I tried this but getting an undefined function error:

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

Any help appreciated.

Thanks

Answer 1

You need to return that value, otherwise you're not doing anything with it.

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

Demo

 $('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>