jQuery 將 span 標籤文本賦值給 data-* 自定義屬性

場景

頁面結構如下，需將每個 `` 的文本內容寫入其 `data-hover` 屬性：

<ul class="productImgBtnList clearfix">
  <li data-index="0" class="productImgBtn col-3 grouped_elements">
    <span data-hover="">1測試</span>
  </li>
  <li data-index="1" class="productImgBtn col-3 grouped_elements">
    <span data-hover="">2測試</span>
  </li>
  ...
</ul>

jQuery 實現

$(function() {
    $('.productImgBtnList li').each(function() {
        var $span = $(this).find('span');
        var text = $span.text();
        $span.attr('data-hover', text);
    });
});

代碼解析

• 使用 `.each()` 遍歷所有 `li`，避免手動索引迴圈。
• .find('span') 定位當前 `li` 下的 `span`。
• .text() 獲取純文本，.attr('data-hover', text) 寫入屬性。

效果圖

執行後，每個 `span` 的 `data-hover` 將等於其顯示文本：