How to extract the link title from a responsive menu?

Question

How to extract the link title from a responsive menu?

Navigation

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

1

I have the following structure of a menu:

<ul id="responsiveAccordion" class="showedmenu"> 
   <li><a title="Página Inicial" href="/">Página Inicial</a></li>
   <li id="category_item_1">
       <div class="responsiveInykator"><span>Teste </span><i class="fa fa-angle-down fa-2" aria-hidden="true"></i></div>
         <a href="/">Início</a>
          <ul style="display: block;">
             <li><a title="Categoria 1" href="/categoria-1">Categoria 1</a></li>  
             <li><a title="Categoria 2" href="/categoria-1">Categoria 2</a></li>  
          </ul>
      </div>
   </li>
</ul>
...

In my code, when I console below:

console.log($('#responsiveAccordion > li .responsiveInykator').parent().children()[1]);

It shows me:

<a href="/">Início</a>

I would like to capture the link text: "Start"

I tried this but it gave error:

 console.log($('#responsiveAccordion > li .responsiveInykator')
            .parent()
            .children()[1].text());

javascript jquery

asked by anonymous 12.08.2016 / 16:43

2 answers

1

Since this <a> is sibling (next element at the same DOM level) you can use .next() and to use text can use .html() or .text();

var texto = $('#responsiveAccordion > li .responsiveInykator').next().text();
alert(texto);

jsFiddle: link

12.08.2016 / 16:50

WildFly 10 + Spring Security + JSF + CDI does not inject dependency How to check if a data exists in storage

score 1 · Accepted Answer

You were doing something wrong:

It is text and not text()

console.log($('#responsiveAccordion > li .responsiveInykator').parent().children()[1].text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulid="responsiveAccordion" class="showedmenu"> 
   <li><a title="Página Inicial" href="/">Página Inicial</a></li>
   <li id="category_item_1">
       <div class="responsiveInykator"><span>Teste </span><i class="fa fa-angle-down fa-2" aria-hidden="true"></i></div>
         <a href="/">Início</a>
          <ul style="display: block;">
             <li><a title="Categoria 1" href="/categoria-1">Categoria 1</a></li>  
             <li><a title="Categoria 2" href="/categoria-1">Categoria 2</a></li>  
          </ul>
      </div>
   </li>
</ul>

As Sergio rightly said, I would like to add that it works well this way (it would work with, .textContent or .innerHTML ). But there are cases where it would not work doing this way