Store value of an attribute in a variable in jquery

Navigation
1

I have this following menu : 

<li><a id="#nav" href="#"><i class="a glyphicon glyphicon-home">
    </i><span>Inicial</span></a>
</li>
<li><a id="#nav" href="#"><i class="b glyphicon glyphicon-user">
</i>
    <span>Perfil</span></a>
</li>
<li><a id="#nav" href="#"><i class="c glyphicon glyphicon-calendar">
</i>
    <span>Calendário</span></a>
</li>
<li><a id="#nav" href="#"><i class="d glyphicon glyphicon-file">
</i>
    <span>Material Didático</span></a>
</li>
<li><a id="#nav" href="#"><i class="e glyphicon glyphicon-stats">
</i>
    <span>Frequencias</span></a>
</li>
<li><a id="#nav" href="#"><i class="f glyphicon glyphicon-list-alt">
</i>
    <span>Notas</span></a>
</li>
<li><a id="#nav" href="#"><i class="g glyphicon glyphicon-usd">
</i>
    <span>Financeiro</span></a>
</li>
<li><a id="#nav" href="#"><i class="h glyphicon glyphicon-book">
    </i><span>Biblioteca</span></a>
</li>
<li><a id="#nav" href="#"><i class="j glyphicon glyphicon-cog">
</i>
    <span>Configurações</span></a>
</li>

I have this jQuery code: 

$(document).ready(function(){
     $("a#nav").click(function(){

     });
});

What I need is when I click for example on the menu I get the value of class and put in a variable, for example if I clicked on the first

    
asked by anonymous 25.10.2017 / 21:27

3 answers

3

Try this: 

$(function(){
    $('a.nav').click(function(){
        var classes = $(this).find('i').attr('class');
        var classe = classes.charAt(0);
    });
});

However, this does not resolve if the name of the class you want to catch has more than one character and if it is not at the beginning of the statement.

And according to @DanielAlves's comment in the question do not duplicate a id use classes to identify your links and it's interesting that href has a #! because the page does not scroll: 

<li><a class="nav" href="#!"><i class="a glyphicon glyphicon-home">
    </i><span>Inicial</span></a>
</li>
    
25.10.2017 / 21:39
0

You can create an attribute in the <a data-link="valor_atributo" href> link tag and retrieve this data in jquery.

The code below is very simple but provides the answer to the solution. 

$("li a").click(function(){
      var variavel = $(this).attr('data-link');
      console.log('o link selecionado foi '+variavel);
     });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="nav nav-tabs">
<li><a data-link="a" href="#"><i class="a glyphicon glyphicon-home">
    </i><span>Inicial</span></a>
</li>
<li><a data-link="b" href="#"><i class="b glyphicon glyphicon-user">
</i>
    <span>Perfil</span></a>
</li>
<li><a data-link="c" href="#"><i class="c glyphicon glyphicon-calendar">
</i>
    <span>Calendário</span></a>
</li>
<li><a data-link="d" href="#"><i class="d glyphicon glyphicon-file">
</i>
    <span>Material Didático</span></a>
</li>
<li><a data-link="e" href="#"><i class="e glyphicon glyphicon-stats">
</i>
    <span>Frequencias</span></a>
</li>
<li><a data-link="f" href="#"><i class="f glyphicon glyphicon-list-alt">
</i>
    <span>Notas</span></a>
</li>
<li><a data-link="g" href="#"><i class="g glyphicon glyphicon-usd">
</i>
    <span>Financeiro</span></a>
</li>
<li><a data-link="h" href="#"><i class="h glyphicon glyphicon-book">
    </i><span>Biblioteca</span></a>
</li>
<li><a data-link="j" href="#"><i class="j glyphicon glyphicon-cog">
</i>
    <span>Configurações</span></a>
</li>
</ul>
    
25.10.2017 / 21:53
0

I found it strange that you put in #nav of html , would not it only id="nav" ?

It has also been reported that it is not a good practice id with same name, so check this html because it actually has imperfections.!

But there is a way that can work for your specific case, eg: 

$(document).ready(function() {
  $("li a").click(function() {
      var value = $(this)
        .find('i')
        .attr('class')
        .charAt(0);
      console.log(value);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><li><aid="#nav" href="#"><i class="a glyphicon glyphicon-home">
    </i><span>Inicial</span></a>
</li>
<li><a id="#nav" href="#"><i class="b glyphicon glyphicon-user">
</i>
    <span>Perfil</span></a>
</li>
<li><a id="#nav" href="#"><i class="c glyphicon glyphicon-calendar">
</i>
    <span>Calendário</span></a>
</li>
<li><a id="#nav" href="#"><i class="d glyphicon glyphicon-file">
</i>
    <span>Material Didático</span></a>
</li>
<li><a id="#nav" href="#"><i class="e glyphicon glyphicon-stats">
</i>
    <span>Frequencias</span></a>
</li>
<li><a id="#nav" href="#"><i class="f glyphicon glyphicon-list-alt">
</i>
    <span>Notas</span></a>
</li>
<li><a id="#nav" href="#"><i class="g glyphicon glyphicon-usd">
</i>
    <span>Financeiro</span></a>
</li>
<li><a id="#nav" href="#"><i class="h glyphicon glyphicon-book">
    </i><span>Biblioteca</span></a>
</li>
<li><a id="#nav" href="#"><i class="j glyphicon glyphicon-cog">
</i>
    <span>Configurações</span></a>
</li>
    
25.10.2017 / 21:45
Why does the "container" class in Bootstrap leave side spaces on the page? This is normal? Buttons do not display correctly