How to extract the link title from a responsive menu?

Asked

Viewed 43 times

1

I have the following menu structure:

<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 do console below:

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

He shows me:

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

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

I tried that but it was wrong:

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

2 answers

1


You were doing wrong:

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

As Sergio rightly said, I take this opportunity to add that in this case it works well (it would also work with, .textContent or the .innerHTML). But there are cases where it would not work doing so

  • Okay, make a mistake, thank you!

  • You’re welcome @Ivanferrer

  • Miguel (and @Ivanferrer) , it is worth mentioning that .text only works on a few elements. Is part of HTML API and it would be better to use the .textContent or the .innerHTML.

  • 1

    Edited @Sergio. Obgado by tip

1

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

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

jsFiddle: https://jsfiddle.net/wo01rf6x/

  • Sergio because text() It works that way, not like Ivan did?

  • @Miguel when you use [1] you get the DOM element, "raw", which is no longer a jQuery object. That’s why you can’t. In this case .innerHTML or .textContent would be the best.

  • 1

    I get it, obnoxious

  • Not to lose the object, I decided as follows: $('#responsiveAccordion > li .responsiveInykator').parent().children('ul li a:eq(0)').text();

Browser other questions tagged javascript jquery

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