CODEWITHSUNDEEP
javascriptjqueryhtmljquery-events
AndreaNobili
AndreaNobili

Reputation: 42957

How can I retrieve the text inside a span element having a specific class that is inside a clicked object using JQuery?

I am not so into JavaScript\jQuery and I have the following doubt about how to handle the following situation in a jQuery script that implements a menu, here the JSFiddle link to see the entire running code:

https://jsfiddle.net/AndreaNobili/s8wos4n2/

So, as you can see in the previous JSFiddle, I have the following situation.

Into the HTML code I have the menu tabs that are implemented by <li> tabs something like this:

<li class="com__nav-item">
    <a href="" class="com__nav-link centered">
        <span class="blue-line animate scaleIn delay-3 menuVoiceTitle">FUNCTION 1</span>
        <span class="white-circle animate scaleIn delay-5"></span>
    </a>
</li>

So, as you can see each <li> tab implementing a menu item contain a <span> that show the menu item title (for example FUNCTION 1 in this example).

All these <span> have set the menuVoiceTitle CSS class.

Ok, when the user click a menu item it is performed the JavaScript switchTab() function and here I have the p variable:

var p = $(this).parent('li');

I think that this is the reference of the <li> of the clicked link (or something like this).

So now I have the reference of the <li> element representing the clicked menu item and now I want to retrieve the text inside the <span> element having menuVoiceTitle CSS class inside this <li> element.

How can I correctly implement this behavior using jQuery?

Upvotes: 1

Views: 168

Answers (2)

Pedram
Pedram

Reputation: 16575

Simply:

$('.com__nav-item').click(function(){
   var targettext = $(this).find('span.menuVoiceTitle').text();
   alert(targettext);
});

jsFiddle

Upvotes: 1

Sunny Techo
Sunny Techo

Reputation: 68

var p = $(this).parent('li');

This line select parent li means current "li tag" you clicked right now. 

targetText = p.find('.menuVoiceTitle').html();

Now, use this line just after "var p = $(this).parent('li');" and you will required text.

Note:- find() is a jquery function which is try to find element by selector (id, class, tag name) inside element.

Upvotes: 0

Related Questions