如何通过JavaScript/jQuery仅显示每个score-set中的最高score项？

原始HTML结构 #

<div class="score-set">
  <div class="score-item">A<div id="score">96+</div></div>
  <div class="score-item">B<div id="score">99</div></div>
  <div class="score-item">C<div id="score">99</div></div>
  <div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">86</div></div>
  <div class="score-item">B<div id="score">88</div></div>
  <div class="score-item">C<div id="score">90</div></div>
  <div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">83-</div></div>
  <div class="score-item">B<div id="score">83+</div></div>
  <div class="score-item">C<div id="score">76</div></div>
  <div class="score-item">D<div id="score">78</div></div>
</div>

期望效果 #

处理后每个score-set仅保留组内符合规则的最高分数项，最终HTML结构如下：

<div class="score-set">
  <div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
  <div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">83-</div></div>
</div>

规则说明 #

• 忽略id="score"元素中的非数字字符（如+、-）进行分数数值比较
• 每个score-set仅保留一个最高分数项
• 若组内多个项分数数值相同，保留原始顺序中最先出现的项
• 保留项的原始内容（包括+、-符号）

实现代码 #

原生JavaScript版本 #

// 获取所有分数组容器
const scoreSets = document.querySelectorAll('.score-set');

scoreSets.forEach(set => {
  const items = set.querySelectorAll('.score-item');
  let maxScore = -Infinity;
  let targetItem = null;

  items.forEach(item => {
    // 提取分数的纯数字部分
    const scoreText = item.querySelector('#score').textContent;
    const scoreNum = parseInt(scoreText.replace(/[^0-9]/g, ''), 10);
    
    // 更新最高分项：分数更高则替换，分数相同则保留先出现的项
    if (scoreNum > maxScore) {
      maxScore = scoreNum;
      targetItem = item;
    }
  });

  // 清空当前组，仅保留目标项
  set.innerHTML = '';
  set.appendChild(targetItem);
});

jQuery版本 #

$('.score-set').each(function() {
  const $set = $(this);
  const $items = $set.find('.score-item');
  let maxScore = -Infinity;
  let $targetItem = null;

  $items.each(function() {
    const $item = $(this);
    const scoreText = $item.find('#score').text();
    const scoreNum = parseInt(scoreText.replace(/[^0-9]/g, ''), 10);

    if (scoreNum > maxScore) {
      maxScore = scoreNum;
      $targetItem = $item;
    }
  });

  // 重置组内容，仅保留目标项
  $set.empty().append($targetItem);
});

内容的提问来源于stack exchange，提问作者Anthony