есть ли способ скрыть ссылку, если цель данных не найдена?

Question

можем ли мы скрыть ссылку, если цель данных, не найдена

например:

<a class="navbar-toggle secondary" data-target=".region-header-right #block-secondarymenu"><span class="glyphicon glyphicon-plus"></span></a>
<a class="navbar-toggle search" data-target=".region-header-right .block--type-search"><span class="glyphicon glyphicon-search"></span></a>


<div id="#block-secondarymenu">something</div>
<div class="block--type-search">something</div>

можем ли мы скрыть <a class="navbar-toggle search" data-target=".region-header-right .block--type-search"><span class="glyphicon glyphicon-search"></span></a>

если нет <div class="block--type-search">something</div> данные- цель найдена на странице.

Любая помощь приветствуется.

Answer 1

В этом примере будет показана только вторая ссылка, потому что все цели в этой ссылке существуют. https://jsfiddle.net/uyq725L4/

<a class="navbar-toggle secondary" data-target=".region-header-right #block-secondarymenu"><span class="glyphicon glyphicon-plus"></span>Link #1</a>
<a class="navbar-toggle search" data-target=".region-header-right .block--type-search"><span class="glyphicon glyphicon-search"></span>Link #2</a>


<div id="#block-secondarymenu">something</div>
<div class="block--type-search">something</div>
<div class=".region-header-right">something</div>

и javascript

jQuery(function(){
    var atags = jQuery('a').not('[data-target=""]');
  for (var i=0; i<atags.length;i++) {
    var targets = jQuery(atags[i]).data('target').split(" ");
    for (var j=0; j<targets.length; j++)
        if (jQuery(targets[i]).length===0) jQuery(atags[i]).hide();
  }
});

Answer 2

Вы можете сделать это таким образом в ванили javascript:

Получить все ссылки

var links = document.getElementsByTagName('a');

затем проверить каждую ссылку, если цель данных элемент найден на странице, и если это не так, то скройте его:

for (l of links) {
    let selector = l.attributes["data-target"];
    if (!selector || !document.querySelector(selector.value)) {
        l.style.display = "none";
    }
}

Имейте в виду, что это не проверяет, ссылается ли целевой объект данных на единственный объект на странице. Для этого вместо !document.querySelector(selector.value) вы можете использовать querySelectorAll и проверить, что возвращаемый массив имеет длину, отличную от 1.