如何使用jQuery修改slick-slide元素的aria-describedby属性？

问题说明 #

需要将每个带.slick-slide类的<div>元素的aria-describedby属性，修改为该元素内部<h3>标签的文本内容，页面中通常存在3-6个这类元素。

原代码问题分析 #

你写的代码有两处关键错误：

1. 选择器错误：$('div .slick-slide')中的空格表示“div下的.slick-slide元素”，但目标是带.slick-slide类的div本身，应该写成$('div.slick-slide')。
2. 元素查找方向错误：closest("h3")是向上查找当前元素的父级/祖先h3，但h3是当前div的后代元素，应该用find("h3")向下查找内部的h3标签。

修正后的代码 #

$('div.slick-slide').each(function () {
    // 查找当前slick-slide内部的h3，获取文本并去除首尾空白
    var h3Text = $(this).find("h3").text().trim();
    // 为当前元素设置aria-describedby属性
    $(this).attr("aria-describedby", h3Text);
});

额外注意事项 #

如果页面的slick轮播是动态生成的（比如异步加载内容、轮播初始化后才生成.slick-slide元素），需要确保代码在轮播初始化完成后执行，可放在slick的init回调中：

// 假设你的轮播容器类名为your-slick-container
$('.your-slick-container').slick({
  // 你的轮播配置项
  init: function() {
    $('div.slick-slide').each(function () {
        var h3Text = $(this).find("h3").text().trim();
        $(this).attr("aria-describedby", h3Text);
    });
  }
});

内容的提问来源于stack exchange，提问作者Andrew Rout