jQuery - 使用標題在鏈接中創建aria-labelledby屬性

Question

試圖使用jQuery來使用<h3>標題中的文本，並在<a href="">read more</a>鏈接中生成動態aria標籤的屬性。任何想法是什麼問題以及如何解決？

HTML：

<section class="stories-section"> 
    <div class="container"> 
     <h2>Main Heading</h2> 
     <div class="bx-wrapper"> 
      <div class="bx-viewport"> 
       <div class="row"> 
        <div class="col-md-4 col-sm-4 col-xs-4 slide"> 
         <a href="#" target="_blank" class="story_image"><img src="" alt="" /></a> 
         <h3>Heading 1</h3> 
         <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="">read more</a></p> 
        </div> 
        <div class="col-md-4 col-sm-4 col-xs-4 slide"> 
         <a href="#" class="story_image"><img src="" alt="" /></a> 
         <h3>Heading 2</h3> 
         <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="">read more</a></p> 
        </div> 
        <div class="col-md-4 col-sm-4 col-xs-4 slide"> 
         <a href="#" target="_blank" class="story_image"><img src="" alt="" /></a> 
         <h3>Heading 3</h3> 
         <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="">read more</a></p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

所需的輸出：

<section class="stories-section"> 
    <div class="container"> 
     <h2>Main Heading</h2> 
     <div class="bx-wrapper"> 
      <div class="bx-viewport"> 
       <div class="row"> 
        <div class="col-md-4 col-sm-4 col-xs-4 slide"> 
         <a href="#" target="_blank" class="story_image"><img src="" alt="" /></a> 
         <h3>Heading 1</h3> 
         <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="" aria-labelledby="heading-1">read more</a></p> 
        </div> 
        <div class="col-md-4 col-sm-4 col-xs-4 slide"> 
         <a href="#" class="story_image"><img src="" alt="" /></a> 
         <h3>Heading 2</h3> 
         <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="" aria-labelledby="heading-2">read more</a></p> 
        </div> 
        <div class="col-md-4 col-sm-4 col-xs-4 slide"> 
         <a href="#" target="_blank" class="story_image"><img src="" alt="" /></a> 
         <h3>Heading 3</h3> 
         <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="" aria-labelledby="heading-3">read more</a></p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

JS：

jQuery(".slide").find("h3").each(function() { 
    var str = jQuery(this).text(); 
    str = str.replace(/\s+/g, '-').toLowerCase(); 
    jQuery(".slide").find("p a").attr('aria-labelledby', str); 
}); 

Answer 1

jQuery(".slide").find("h3").each(function() { 
    var str = jQuery(this).text(); 
    str = str.replace(/\s+/g, '-').toLowerCase(); 
    jQuery(this).parent().find("p a").attr('aria-labelledby', str); 
});