Loop for inside a function

Question

I have a Nav with 5 buttons, and a footer with the same amount, when clicking on the footer buttons they serve anchor to the page, but I need to compare with the Nav items to add the class "Active in them".

Only you’re returning me

btnnav[i].attr("href") is not a Function

What to do?

 $('footer li a').click(function(){
      var hfooter = $(this).attr("href");// Guarda o href desse botao no footer
      var btnnav = $(".btn-nav");//cria um array com todos os botoes da nav
      btnnav.removeClass("active");//tira a classs active deles
      for (var i = 0; i <= btnnav.length; i++) {
         if (btnnav[i].attr("href") === hfooter){
           /*Ao percorrer o array de classes ele deve buscar o que tem o
            href igual o botao que foi clicado, quando encontrar, 
             vai adicionar a class active*/
            btnnav[i].addClass("active");
         }
      }
  });

Answer 1

I don’t think you need to do the whole process... For what you wrote, you just want to change the classes active, right? Then just remove the current and assign the new element (from the event):

$('.footer li a').click(function() {
  $(".footer").find(".btn-nav").removeClass("active"); //tira a classe active
  $(this).addClass("active"); //Adiciona a classe active ao elemento clicado.
});

EDIT:

I think I understand what you want...see if the solution below suits you.

$('.footer li a').click(function() {
  $(".btn-nav").removeClass("active"); //tira a classe active
  var elementos = $(".btn-nav");
  var elementoClicado = $(this);
  var textoLink = elementoClicado.text().trim();
  $.each(elementos, function() {
    if ($(this).text().trim() == textoLink) { // Compara se o elemento do "bottom" com o elemento do topo através do texto - adaptar se estiver outra forma de identificar unicamente.
      $(this).addClass("active"); //Adiciona a classe active ao elemento do topo
      //opcional:
      //elementoClicado.addClass("active"); //Adicionar classe active ao elemento clicado (bottom)
      return false;
    }
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <ul>
    <li><a href="#" class="btn-nav">Link 1</a></li>
    <li><a href="#" class="btn-nav">Link 2</a></li>
    <li><a href="#" class="btn-nav">Link 3</a></li>
    <li><a href="#" class="btn-nav">Link 4</a></li>
  </ul>
</div>
<hr /> Parte de baixo
<hr />
<div class="footer">
  <ul>
    <li><a href="#" class="btn-bottom">Link 1</a></li>
    <li><a href="#" class="btn-bottom">Link 2</a></li>
    <li><a href="#" class="btn-bottom">Link 3</a></li>
    <li><a href="#" class="btn-bottom">Link 4</a></li>
  </ul>
</div>

Answer 2

In a clean way you can do :

$( document ).ready( () => {
    $( '#navLinks .btn-nav' ).click( function () {
      $( '#navLinks' )
        .find( '.btn-nav' )
        .removeClass( 'active' );
      
      $( this ).addClass( 'active' )
    })
})

.active{
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="navLinks">
  
    <li> 
      <a class="btn-nav" href="#a">A</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#b">B</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#c">C</a> 
    </li>
     <li> 
      <a class="btn-nav" href="#d">D</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#e">E</a> 
    </li>
    
  </ul>
</nav>

Answer 3

With the code below you can get the value of href of each item to later make the desired comparisons.

jQuery(function($){
   $(document).ready(function(){
        var elements = $(".btn-nav");
	var link = "";
        for (var i = 0; i < elements.length; i++) {
           link = $(elements[i]).attr("href");
           console.log(link);
	}
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav id="menu">
<a class="btn-nav" href="link1">HTML</a> |
<a class="btn-nav" href="link2">CSS</a> |
<a class="btn-nav" href="link3">JavaScript</a> |
<a class="btn-nav" href="link4">jQuery</a> |
<a class="btn-nav" href="link5">json</a>
</nav>