jQuery 選取器實戰：依 ID 前綴批次選取 span 元素並取值

需求場景

HTML 結構中，<div id="show_baseInfo"> 內包含多組 <span>，奇數項為標籤文字，偶數項為值且 id="show_*"。需一次選取所有值欄位並取得其文字內容。

核心選取器

var $spans = $('span[id^="show_"]'); // 屬性開頭選取器

完整應用範例

<div id="show_baseInfo">
  <span>提現銀行：</span><span id="show_bankCard">1</span>
  <span>持卡人:</span><span id="show_cardHolder">2</span>
  <span>持卡人身份證:</span><span id="show_holderCard">3</span>
  <span>提現卡號:</span><span id="show_cardNo">4</span>
  <span>開卡省：</span><span id="show_province">5</span>
  <span>開卡市：</span><span id="show_city">6</span>
  <span>提現卡類型：</span><span id="show_type">7</span>
</div>

<script>
$(function() {
  var data = {};
  $('span[id^="show_"]').each(function() {
    var key = this.id.replace('show_', '');
    data[key] = $(this).text().trim();
  });
  console.log(data);
  // {bankCard: "1", cardHolder: "2", holderCard: "3", cardNo: "4", province: "5", city: "6", type: "7"}
});
</script>

進階技巧

• id^="show_"：ID 以 "show_" 開頭。
• id$="_end"：ID 以 "_end" 結尾。
• id*="_mid_"：ID 包含 "_mid_"。
• 搭配 .map() 產生陣列：var vals = $('span[id^="show_"]').map(function(){return this.textContent;}).get();

效能提示

若頁面 span 數量極大（>5000），建議先限定父容器：$('#show_baseInfo span[id^="show_"]')，減少 DOM 遍歷範圍。