如何用jQuery实现加载时隐藏NOSP文本且点击按钮可隐藏对应链接

问题根源 #

页面加载阶段已经将<a>标签内的NOSP文本替换删除，后续点击按钮时:contains选择器无法匹配到已经不存在的文本，因此定位不到目标元素。

解决方案 #

页面加载处理NOSP文本时，给原本包含NOSP的链接新增自定义类作为标记，后续隐藏时直接通过类选择器定位即可，修改后完整代码如下：

JavaScript代码

$("a:contains('NOSP')").each(function(){
  // 先给匹配到的链接加标记类
  $(this).addClass('nosp-link');
  // 再替换文本
  $(this).text($(this).text().replace('NOSP',''));
});

$("button").click(function(){
  // 直接通过标记类隐藏对应链接
  $(".nosp-link").hide();
});

CSS代码

a { display: table; }

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Hide spoilers</button>

<a href="#">Full match</a>
<a href="#">All goals NOSP</a>
<a href="#">Highlights</a>
<a href="#">Highlights</a>
<a href="#">Highlights NOSP</a>

补充说明 #

该方案不仅解决了元素定位问题，类选择器的匹配效率也比:contains文本选择器更高，后续如果需要做「显示/隐藏剧透」切换功能，直接操作.nosp-link类的显隐即可。

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