如何用jQuery为同容器内无aria-label的链接添加对应标题属性

问题根源 #

原代码里$(".box-container > .box-title").text()会选取页面上所有.box-container下的.box-title元素，把它们的文本直接拼接后赋值给每个目标链接，导致所有a标签的aria-label都变成了所有标题的组合值（比如"Title 1Title 2Title 3"），没实现“每个链接对应自身容器内标题”的需求。

修正后的代码方案 #

方案一：遍历目标链接，通过兄弟元素获取对应标题

$('.box-container a:not([aria-label])').each(function() {
  // 获取当前a标签同级的.box-title文本，去除前后空白
  var titleText = $(this).siblings('.box-title').text().trim();
  $(this).attr('aria-label', titleText);
});

方案二：利用attr回调上下文，通过父容器定位标题

$('a:not([aria-label])').attr('aria-label', function() {
  // 找到当前a标签所在的.box-container容器，再获取内部的.box-title文本
  return $(this).closest('.box-container').find('.box-title').text().trim();
});

代码说明 #

• 两种方案核心都是限定查找范围：要么通过siblings直接找同级标题，要么通过closest定位到当前a标签的父容器，再在容器内查找标题，确保每个a标签只获取自身所在容器的标题文本。
• trim()用于去除标题文本前后可能存在的空白字符，让aria-label内容更规范。

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