Показывать только определенные ссылки через CSS или Javascript / JQuery только на виджете, который отображается после загрузки страницы

Question

Я пытался найти решение проблемы, с которой я столкнулся на веб-сайте, но я не очень хорошо разбираюсь в jquery / javascript.

На странице, которую мы отображаем, после страницы отображается какой-то javascriptзагружен и отображает на странице несколько html / css, интересующая нас часть выглядит следующим образом:

<div class="profile-list">
<a class="profile-profile" href="https://website.com/?profile=joe_blogs_337#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=sam_smith_292#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=john_doe_31#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=stack_overflow_17#show_more">Add loads of html</a>
</div>

Я хочу показать только определенные профили, если есть какие-либо профили, которые несовпадение, тогда мы не заботимся о них.

Я пытался сделать это с помощью CSS, например, я могу скрыть индивидуально через:

a.profile-profile[href$='?profile=stack_overflow_17#show_more'] {
    display: none !important;
}

Я могу скрыть все, кроме одного, с помощью:

a.profile-profile:not([href$='?profile=stack_overflow_17#show_more']) {
    display: none !important;
}

Однако , если я попытаюсь скрыть все, кроме два , они все будут скрыты ...

a.profile-profile:not([href$='?profile=stack_overflow_17#show_more']), a.profile-profile:not([href$='?profile=john_doe_31#show_more']) {
    display: none !important;
}

Я предполагаюЯ не могу сделать это с помощью CSS, поэтому я ищу быстрое решение javascript ...

Есть ли способ определить, когда запускается внешний js-файл, чтобы он как можно быстрее изменял отображаемый HTML-код?

Я бы , а не скрыть все ссылки через:

.main_content .profile-list .profile-profile{
    display: none;
}

Чтобы потом использовать

$("a[href$=?profile=stack_overflow_17#show_more]").show();
$("a[href$=?profile=john_doe_31#show_more]").show();

Буду признателен за любую помощь с jQuery / Javascript

Answer 1

Попробуйте это:

let removeProfiles = [
'?profile=stack_overflow_17#show_more',
'?profile=john_doe_31#show_more',
];

$('a.profile-profile').hide();

removeProfiles.forEach(profile=>{

 $('a.profile-profile[href$="'+profile+'"]').show()

})

Answer 2

Пока вы хотите отфильтровать больше href с .. Вы можете создать array ожидаемых href с, затем использовать .filter() с .indexOf() до hide/show их

^{Для точных строк}

var a_Links = [
  "?profile=stack_overflow_17#show_more",
  "?profile=john_doe_31#show_more"
  // add more expected href's .....
];
$('a').filter(function(){
  return a_Links.indexOf($(this).attr('href')) > -1
}).hide();  // to show use `.show()`

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a class="profile-profile" href="just">A Link</a>
<a class="profile-profile" href="?profile=stack_overflow_17#show_more">Another Link</a>
<a class="profile-profile" href="?profile=john_doe_31#show_more">Another 2 Link</a>

^{Противоположное А конкретно ссылки внутри .profile-list элемента И содержит функцию для поиска любой из строк в массиве indexOf любого из href}

var a_Links = [
  "?profile=stack_overflow_17#show_more",
  "?profile=john_doe_31#show_more"
  // add more expected href's .....
];
$('.profile-list a.profile-profile').filter(function(){
  return contains(a_Links , $(this).attr('href').trim().toLowerCase()) !== 1;
}).hide();  // to show use `.show()`


function contains(a , href) {
  var founded = 0
  for (var i = 0; i < a.length; i++) {
      if(founded == 1){break;}
      founded = (href.indexOf(a[i]) > -1) ? 1 : 0;
  }
  return founded;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="profile-list">
  <a class="profile-profile" href="just">A Link</a>
  <a class="profile-profile" href="link?profile=stack_overflow_17#show_more">Another Link</a>
  <a class="profile-profile" href="link?profile=john_doe_31#show_more">Another 2 Link</a>
</div>


<div class="another-profile-list">
  <a class="profile-profile" href="just">A Link</a>
  <a class="profile-profile" href="?profile=stack_overflow_17#show_more">Another Link</a>
  <a class="profile-profile" href="?profile=john_doe_31#show_more">Another 2 Link</a>
</div>