jQuery 處理同 ID 多個 Input 獲取 Value：屬性選擇器與 each 遍歷

問題場景

頁面循環輸出多組 <span id="bar"></span><input id="end_time" type="hidden" value="...">，ID 重複。需獲取每個 input 的 value，與當前時間戳相減，結果輸出到前一個 span。

核心問題

• HTML 規範要求 ID 在文檔中唯一，重複 ID 導致 document.getElementById、$('#end_time') 僅返回第一個元素。
• 必須使用 屬性選擇器 $('input[id="end_time"]') 選中所有同 ID 元素。

完整解決方案

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<span class="bar"></span>
<input class="end_time" type="hidden" value="1483027200">
<span class="bar"></span>
<input class="end_time" type="hidden" value="1468944000">
<span class="bar"></span>
<input class="end_time" type="hidden" value="1466524800">

<script>
$(function() {
    var now = Date.now(); // 毫秒級時間戳
    // 注意：value 是秒級時間戳，需統一單位
    $('input[id="end_time"]').each(function() {
        var endTimeSec = parseInt(this.value, 10); // 秒
        var endTimeMs = endTimeSec * 1000; // 轉毫秒
        var diffMs = now - endTimeMs; // 差值毫秒
        var diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); // 轉天數
        
        // 輸出到前一個 span
        $(this).prev('.bar').text(diffDays + ' 天前');
    });
});
</script>

關鍵點解析

1. 屬性選擇器：$('input[id="end_time"]') 選中所有 id="end_time" 的 input，繞過 ID 唯一性限制。
2. .each() 遍歷：回調函數中 this 指向當前原生 DOM 元素，this.value 直接取值最高效。
3. .prev('.bar')：精準選中前一個同級 class="bar" 的 span，避免結構變動導致錯誤。
4. 時間戳單位統一：JS Date.now() 返回毫秒，後端常存秒，必須 * 1000 統一後再相減。

HTML 結構優化建議

<!-- 推薦：用 data-* 屬性存儲時間，class 替代重複 ID -->
<div class="time-item">
  <span class="display"></span>
  <input type="hidden" class="end-time" data-timestamp="1483027200" />
</div>

<script>
$('.end-time').each(function() {
    var endMs = $(this).data('timestamp') * 1000;
    $(this).prev('.display').text(formatDiff(Date.now() - endMs));
});
</script>

總結

重複 ID 是無效 HTML，但現實中常遇到。用 屬性選擇器 + each 遍歷 可正常處理。長期項目應重構為 class + data-* 屬性 模式，符合規範且更易維護。