使用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是<a>元素）。所以我假设我所要做的就是在.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)  

Example fiddle

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();
});