(jQuery) 將元素內的標題作為 aria-label 應用到 div 內且不包含 aria label 的鏈接

Question

HTML

<div class="box-container">
 <a href="#"></a>
 <h3 class="box-title">Title 1</h3>
</div>
<div class="box-container">
 <a href="#"></a>
 <h3 class="box-title">Title 2</h3>
</div>
    <div class="box-container">
 <a href="#"></a>
 <h3 class="box-title">Title 3</h3>
</div>

jQuery

 $('a:not([aria-label])').attr('aria-label', function() {
      var txt = $(".box-container > .box-title").text();
      $(this).attr("aria-label", txt);
  });

問題是上面的 div 在整個頁面中出現了 3 次，所以上面的代碼將返回並應用為鏈接中的 aria-label，所有具有這些類的標題。 示例：aria-label="標題元素 1 標題元素 2 標題元素 3"

所以我想弄清楚為什么以上不適用於div的鏈接，每個div的specific.box-title class，只有。

我試圖實現的目標和 $(this) 無法正常工作：

  <div class="box-container">
     <a href="#" aria-label="Title 1"></a>
     <h3 class="box-title">Title 1</h3>
  </div>
  <div class="box-container">
     <a href="#" aria-label="Title 2"></a>
     <h3 class="box-title">Title 2</h3>
  </div>
  <div class="box-container">
     <a href="#" aria-label="Title 3"></a>
     <h3 class="box-title">Title 3</h3>
  </div>

Answer 1

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box-container"> <a href="#"></a> <h3 class="box-title">Title 1</h3> </div> <div class="box-container"> <a href="#"></a> <h3 class="box-title">Title 2</h3> </div> <div class="box-container"> <a href="#"></a> <h3 class="box-title">Title 3</h3> </div> <script> $('a:not([aria-label])').attr('aria-label', function() { var txt = $(this).parent().find(".box-title").text(); $(this).attr("aria-label", txt); }); </script>