1

Bom, sou novo usando Javascript e estou tendo algumas dificuldades. Tenho uma box que possui 6 links, isso envolvido em um dom-repeat, ou seja, são muitas 'boxes' com 6 links dentro. Preciso checar se dentro de cada box existe algum link, se tiver um eu já posso deixar a box visível, porém se todos forem nulos ou vazios a box deve sumir. Infelizmente não estou conseguindo pensar numa lógica boa o suficiente para conseguir o que preciso. Além disso estou com dificuldades em conseguir o valor do href.

Tentei criar um código, mas além de não estar funcionando, acho que estou pensando mal na forma de resolver o problema, me parece faltar algo para analisar todos os 6.

Função que criei para tentar resolver:

function teste(){
    var div = document.getElementsByClassName('box');

    var links = div.getElementsByTagName('a').href;

    if(links == '#'){
        div.style.display = 'none'
  }
}

Montei uma segunda função, mas também não funcionou

function teste2(){
  var box = document.getElementsByClassName('box');
  var link = box.getElementsByTagName('a').href;
  var contar = 0;

  for (x = 0; x < 6; x++){
    if(link == "#"){
        contar++
    }
  }

  if (contar == 6){
    box.style.display = 'none'
  }
}

HTML base

<div class="box">
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>
  <a href="#">D</a>
  <a href="#">E</a>
  <a href="#">F</a>
</div>
1
  • 1
    getElementsByClassName e getElementsByTagName retornam arrays (e não um único elemento), então vc deve percorrer estes arrays para acessar os elementos retornados
    – hkotsubo
    Commented 18/06/2018 às 13:00

2 Respostas 2

3

O principal problema no seu código é estar tentando acessar a propriedade href de um conjunto de valores. A função getElementsByTagName, como o próprio nome diz, traz uma lista de elementos pelo nome da tag, mas você tentou acessar a propriedade href da lista, não dos elementos. De qualquer forma, existe uma maneira mais simples:

Basta você utilizar o método querySelectorAll definindo o valor do href que você está buscando:

const boxes = document.querySelectorAll('.box');

for (let box of boxes) {
  const voidLinks = box.querySelectorAll('a[href="#"]');
  
  if (voidLinks.length > 0) {
    console.log('Foi encontrado pelo menos um link vazio');
  } else {
    console.log('Não há links vazios');
  }
}
<div class="box">
  <a href="#a">A</a>
  <a href="#s">B</a>
  <a href="#s">C</a>
  <a href="#s">D</a>
  <a href="#s">E</a>
  <a href="#s">F</a>
</div>

<div class="box">
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>
  <a href="#">D</a>
  <a href="#">E</a>
  <a href="#">F</a>
</div>

Como você deseja ocultar aqueles que possuem todos os links vazios, basta verificar se existe pelo menos um link não vazio para deixar visível:

const boxes = document.querySelectorAll('.box');

for (let box of boxes) {
  const links = box.querySelectorAll('a:not([href="#"])');
  
  if (links.length == 0) {
    box.hidden = true;  // Só tem link vazio, oculta a div
  }
}
<div class="box">
  <a href="#a">A</a>
  <a href="#s">B</a>
  <a href="#s">C</a>
  <a href="#s">D</a>
  <a href="#s">E</a>
  <a href="#s">F</a>
</div>

<div class="box">
  <a href="#">G</a>
  <a href="#">H</a>
  <a href="#">I</a>
  <a href="#">J</a>
  <a href="#">K</a>
  <a href="#">L</a>
</div>

1
  • Entendi, muito obrigado pela ajuda. Funcionou da forma que eu queria aqui. Estarei mais atento para buscar informações específicas nas listas retornadas. Grato novamente Commented 18/06/2018 às 13:20
2

Usando .filter():

function teste(){
   var div = document.querySelectorAll('.box');
   [].filter.call(div, function(e){
      if(e.querySelectorAll("a:not([href='#'])").length == 0) e.hidden = true;
   });
}
<div class="box">
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>
  <a href="#">D</a>
  <a href="#">E</a>
  <a href="#">F</a>
</div> 
<div class="box">
   nada aqui
</div> 
<div class="box">
  <a href="link qualquer">A</a>
  <a href="#">B</a>
</div> 
<button onclick="teste()">Checar</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .