Storing an attribute’s value in a variable in jquery

Question

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>

and I have this jQuery code:

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

     });
});

what I need is when I click for example in the menu I get the value of class and put into a variable, for example if I click in the first "Initial" I took the value of class, which in this case would be the to.

Answer 1

Try this:

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

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

And according to @Danielalves' comment on the question do not duplicate one id use classes to identify your links and it is interesting href have a #! because so the page does not give "scroll":

<li><a class="nav" href="#!"><i class="a glyphicon glyphicon-home">
    </i><span>Inicial</span></a>
</li>

Answer 2

I thought it was weird you put it on #nav of html, wouldn’t just be 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, example:

$(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><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>

Answer 3

You can create an attribute in the link tag <a data-link="valor_atributo" href> and recover 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>
<ul class="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>