如何使用JQuery检索具有特定类的span元素中的文本？

Question

我不太喜欢JavaScript，对于如何在实现菜单的jQuery脚本中处理以下情况，我有以下疑问，这里的JSFiddle链接可以查看整个正在运行的代码：

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

因此，正如您在前面的JSFiddle中所看到的，我有以下情况。

在HTML代码中，我有由<li>选项卡实现的菜单选项卡，如下所示：

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

因此，如您所见，实现菜单项的每个<li>选项卡都包含一个显示菜单项标题的<span> (例如，本例中的函数1 )。

所有这些<span>都设置了menuVoiceTitle CSS类。

好的，当用户单击菜单项时，它将执行JavaScript switchTab()函数，这里有p变量：

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

我认为这是点击链接(或类似于此)的<li>的引用。

现在我有了表示单击菜单项的<li>元素的引用，现在我想检索在这个<li>元素中包含menuVoiceTitle CSS类的<span>元素中的文本。

如何使用jQuery正确地实现此行为？

Answer 1

简单地说：

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

jsFiddle

Answer 2

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

这一行选择父li表示现在单击的"li标记“。

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

现在，在"var p=$( this ).parent(‘li’)“之后使用这一行，您将需要文本。

注意：- find ()是一个jquery函数，它试图通过元素内的选择器(id、class、标签名)查找元素。