Jquery 选择器：如何选择给定跨度类中的内容答案

【问题标题】：Jquery selector: How to select the content inside a given span classJquery 选择器：如何选择给定跨度类中的内容
【发布时间】：2019-07-07 22:37:54
【问题描述】：

<a class='leftpanel_anchor' tag='solutions' href='javascript:void(0)' > Solutions to <span class='leftpanel_keywords'>firstConResult</span></a>

我有一个这样的锚。我想选择跨度类“leftpanel_keywords”中的内容。我怎么能用 jquery 做到这一点？

【问题讨论】：

标签： jquery html css-selectors

【解决方案1】：

如果您希望结果中包含 HTML（您的 span 标签），请使用 .html() 方法。如果没有，请按照其他人的建议使用 .text() 方法：

$(".leftpanel_anchor").html(); //Returns everything, including <span> tags
$(".leftpanel_anchor").text(); //Returns only the text, minus any tags

【讨论】：

.html() 不会返回 span 标签。它的作用类似于 innerHTML。
我的选择器正在拉锚。

【解决方案2】：

根据整个页面的结构.. 您可能需要几种不同的方式来格式化您的选择器：

$(".leftpanel_keywords").text()

将为您提供任何具有“leftpanel_keywords”类的元素

$("A.leftpanel_anchor .leftpanel_keywords")").text()

将为您提供任何具有“leftpanel_anchor”类的锚的内部类“leftpanel_keywords”

这两个都会给你跨度内的文本。

【讨论】：

【解决方案3】：

如果我的问题是正确的，有一个parent-child selector 可以做到这一点：

$(".leftpanel_anchor > .leftpanel_keywords").text()

【讨论】：

【解决方案4】：

$(".leftpanel_keywords").text();

【讨论】：

【解决方案5】：

$('a.leftpanel_anchor .leftpanel_keywords').text();

这只会选择锚点内的那些。

如果这种情况不止一次，您应该考虑至少给锚一个 ID。

【讨论】：

【解决方案6】：

$('.leftpanel_keywords').text() 有什么问题？

【讨论】：

【解决方案7】：

您可以使用 CSS 类选择器来获取元素。类选择器的工作方式如下：

$('.name_of_class')

然后返回该 DOM 元素的 jQuery 对象，您可以在该对象上调用各种方法来执行各种操作，例如动画、内容操作以及您可以使用 jQuery 执行的任何操作。

在您的示例中，您可以通过调用获取 innerHTML 值（元素的内容）：

var content = $('.leftpanel_keywords').html();

有很多地方可以阅读更多关于 jQuery 选择器、DOM 遍历和 DOM 操作、jQuery 的一些最重要的部分以及令人兴奋的功能的基本构建块的更多信息！查看jQuery for Designers，这是一系列简单的动手教程和截屏视频。另请查看jQuery official documentation，这是一个综合参考。

希望这会有所帮助！

【讨论】：