如何在jQuery中高效移除内容为‘-’的锚标签超链接包裹

我通过jQuery动态插入了包含锚标签的span元素，当锚标签的内容为‘-’时，需要移除该锚标签的包裹（保留内容）。目前我使用each循环实现了需求，但认为存在不必要的循环，想寻求更高效的实现方法。

相关代码 #

动态插入代码 #

$('span.name', this).after(`<span class="service-tier table-item-tier"><a class='service-link' href="https://link?search=${appName}" target="_blank" onclick="event.stopPropagation()">${selectedApp?.tier || '-'}</a></span>`);

当前实现代码 #

$('.service-link').each(function () {
  var tag = $(this).html();
  if (tag == '-')
  {
    $(this).contents().unwrap();
  }   
});

优化方案 #

方案一：插入前判断，避免后续DOM操作 #

最高效的方式是在生成HTML阶段就判断内容，直接输出需要的结构，省去事后修改DOM的步骤：

const tierContent = selectedApp?.tier || '-';
// 根据内容是否为'-'生成对应HTML片段
const tierHtml = tierContent === '-' 
  ? tierContent 
  : `<a class='service-link' href="https://link?search=${appName}" target="_blank" onclick="event.stopPropagation()">${tierContent}</a>`;

$('span.name', this).after(`<span class="service-tier table-item-tier">${tierHtml}</span>`);

方案二：用过滤选择器替代手动循环 #

如果必须在插入后处理，可以用jQuery的筛选方法替代each循环，代码更简洁高效：

• 用:contains()快速筛选（注意：会匹配包含'-'的内容，比如'x-y'也会被选中）：

$('.service-link:contains("-")').contents().unwrap();

• 精确匹配纯'-'的内容，用filter()方法：

$('.service-link').filter(function() {
  return $(this).text().trim() === '-';
}).contents().unwrap();

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