页面加载后渲染的Widget中仅展示指定链接的JS/jQuery方案求助

嘿，我完全懂你的困扰！首先得给你捋清楚为什么CSS方案在保留多个链接时失效：当你用逗号分隔两个a.profile-profile:not([href$='xxx'])的时候，相当于告诉浏览器「隐藏所有不是第一个指定链接的元素，同时隐藏所有不是第二个指定链接的元素」——而任何一个链接都不可能同时满足是第一个和第二个指定链接，结果就是所有链接都被匹配到隐藏规则里了，这就是为啥全没了。

接下来咱们直接上JavaScript解决方案，既不用先全藏再显，还能精准监听外部JS的渲染时机，确保动态生成的元素一出现就被处理：

方案1：原生JavaScript（无依赖） #

这个方案用MutationObserver来监听目标容器的DOM变化，一旦外部JS把链接渲染出来，立刻处理：

// 定义你想要保留的profile名称列表
const allowedProfiles = ['stack_overflow_17', 'john_doe_31'];

// 获取目标容器
const profileList = document.querySelector('.profile-list');

// 创建MutationObserver实例，监听子元素变化
const observer = new MutationObserver((mutations) => {
  // 遍历所有变化的节点
  mutations.forEach((mutation) => {
    // 只处理新增的元素
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      // 遍历所有新增的.profile-profile链接
      document.querySelectorAll('.profile-profile').forEach(link => {
        // 从href里提取profile名称
        const profileMatch = link.href.match(/profile=([^#]+)/);
        if (profileMatch) {
          const profileName = profileMatch[1];
          // 如果不在允许列表里，就隐藏
          if (!allowedProfiles.includes(profileName)) {
            link.style.display = 'none';
          }
        }
      });
    }
  });
});

// 开始监听目标容器的子元素变化
observer.observe(profileList, { childList: true, subtree: true });

// 额外处理一下页面加载时可能已经存在的链接（防止外部JS提前渲染）
document.querySelectorAll('.profile-profile').forEach(link => {
  const profileMatch = link.href.match(/profile=([^#]+)/);
  if (profileMatch) {
    const profileName = profileMatch[1];
    if (!allowedProfiles.includes(profileName)) {
      link.style.display = 'none';
    }
  }
});

方案2：jQuery版本 #

如果你更习惯用jQuery，下面是适配的代码：

// 定义允许的profile列表
const allowedProfiles = ['stack_overflow_17', 'john_doe_31'];

// 监听.profile-list的DOM变化
$('.profile-list').on('DOMNodeInserted', function(e) {
  // 只处理新增的.profile-profile链接
  if ($(e.target).hasClass('profile-profile')) {
    processProfileLink($(e.target));
  }
});

// 处理单个链接的函数
function processProfileLink($link) {
  const profileMatch = $link.attr('href').match(/profile=([^#]+)/);
  if (profileMatch) {
    const profileName = profileMatch[1];
    if (!allowedProfiles.includes(profileName)) {
      $link.hide();
    }
  }
}

// 页面加载时先处理已有的链接
$('.profile-profile').each(function() {
  processProfileLink($(this));
});

注意事项 #

• 这两个方案都是直接隐藏不符合要求的链接，不会先全藏再显，完全符合你的需求；
• MutationObserver是现代浏览器都支持的API，兼容性很好，比旧的DOMNodeInserted事件更高效（jQuery方案用的是DOMNodeInserted，如果你需要更好的性能，也可以用jQuery结合MutationObserver）；
• 你只需要修改allowedProfiles数组，把想要保留的profile名称加进去就行，不用改其他代码。

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