使用 jQuery 从元素中获取特定文本内容

Question

我需要使用 jQuery 从页面上的元素中提取一些文本，但我不知道如何获取我需要的部分。

这是我的 HTML：

<a href="#" class="song">
    Soulstar
    <div>by <span class="artist">Musiq Soulchild</span></div>
</a>

我想提取 .artist 的内容（在本例中为 Musiq Soulchild）。首先，我尝试了这个：

var this_artist = $(this).children().text();
alert(this_artist);

这给了我 by Musiq Soulchild （因为 this 是 元素）。因此，我假设我所要做的就是在 .children() 方法中指定一个选择器，以将其范围缩小到 .artist 类，如下所示

var this_artist = $(this).children(".artist").text();
alert(this_artist);

：给我...什么也没有。我也尝试过 $(this).children("span").text(); ，同样，也没有返回任何内容。

我做错了什么？

Answer 1

.children() 仅遍历直接子级 - 鉴于您的标记 .artist 不是直接子级。使用 find() 代替：

var this_artist = $(this).find('.artist').text();

Answer 2

您的选择器不正确，因为 .artist 不是 a 元素的直接子元素。相反，您需要使用 $(this).find()：

var this_artist = $(this).find(".artist").text();
alert(this_artist)  

示例小提琴

Answer 3

您应该使用 .find 而不是 .children。 .children 搜索直接子级，而 .find 搜索后代。

Answer 4

要么

$(this).find("span.artist")

或者

$("span.artist", this)

应该这样做...跨度是 div 的子级，而不是锚点。

Answer 5

如果这是链接的对象，则此代码返回范围文本：

var this_artist = $(this).find('span').text();
alert(this_artist);

Answer 6

使用：

$("#results").on("click","a", function(event){
var myartist = $(this).find('.artist').text();
});