Filter through the href

Asked

Viewed 130 times

2

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

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

Function I created to try to solve:

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

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

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

I set up a second function, but it didn’t work either

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 function filter polymer
  • 1

    getElementsByClassName and getElementsByTagName return arrays (and not a single element), so you must go through these arrays to access the returned elements

2 answers

3


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

Just use the method querySelectorAll defining the value of href that you are seeking:

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>

Since you want to hide those who 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>

  • Got it, thanks a lot for the help. It worked out the way I wanted it here. I will be more attentive to look for specific information in the returned lists. Thank you again

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>

Browser other questions tagged javascript function filter polymer

You are not signed in. Login or sign up in order to post.