Filter through the href

Question

Filter through the href

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

Well, I'm new using Javascript and I'm having some difficulties. I have a box that has 6 links, this is involved in a dom-repeat, that is, there are many 'boxes' with 6 links inside. I need to check if there is a link within each box, if it has one I can already leave the box visible, but if all are empty or empty box should disappear. Unfortunately I can not think of logic enough to get what I need. Also I'm having difficulty getting the href value.

I tried to create a code, but besides not working, I think I'm thinking badly about how to solve the problem, I seem to lack something to analyze all 6.

Function I created to try to resolve:

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

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

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

I mounted a second function, but it also did not work

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>

javascript polymer filtro

asked by anonymous 18.06.2018 / 14:38

2 answers

2

Using .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>

18.06.2018 / 15:31

Problem with autocomplete How to add variable to array [JS]

score 3 · Accepted Answer

The main problem in your code is trying to access the href property of a set of values. The getElementsByTagName function, as its name says, brings a list of elements by tag name, but you tried to access the href property of the list , not the elements. Anyway, there is a simpler way:

Just use the querySelectorAll method by setting the value of the href you are looking for:

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>

As you want to hide those that have all the empty links, just check if there is at least one non-empty link to make it visible:

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>