如何在函数中使用 jQuery .each

Question

我有一个在页面上的所有<audio> 元素上运行的函数。它为每首歌曲创建一个新的媒体播放器。那工作正常。我正在使用 WordPress，所以我从页面模板中的数据库中提取歌曲标题和歌曲艺术家。我现在正在尝试使用 jQuery 获取该信息并将其插入到媒体播放器代码中的 <div> 中。我正在获取所有三首歌曲的第一首歌曲信息。这是带有结果的page。

我尝试使用 .each 遍历包含歌曲标题的 .song-title 类并使用 .text 抓取标题，但是当我这样做时，它会抓取所有三首歌曲标题并为每首歌曲输出。

每首歌曲在模板文件中都是这样设置的：

<div class="song">
<div class="song-title d-none">Song Title</div>
<div class="song-artist d-none">Artist</div>
<audio preload="auto" src="song.mp3"></audio>
</div>

Javascript 文件有一个在每个 <audio> 标记上运行的函数，该函数中包含以下代码：

//$('.song').each(function (index, value) {
   $songTitle = $('.song-title').html();
   $songArtist = $('.song-artist').html();
//});

$player.append('<div class = "song-info d-flex flex-column"><div class = "serif font-italic">' + $songTitle + '</div><div class = "small">' + $songArtist + '</div>');

如果需要，这里是full code。

我正在尝试让页面上的每个媒体播放器显示正确的歌曲标题和艺术家。

Answer 1

这最终成为了可行的解决方案。为了限制范围，我不得不使用.siblings() 来遍历 DOM 并隔离每首歌曲的变量。

$songTitle = $this.siblings('.song-title').text();
$songArtist = $this.siblings('.song-title').text();

$player.append('<div class="song-info d-flex flex-column"><div class="serif font-italic">' + $songTitle + '</div><div class="small">' + $songArtist + '</div>');

Answer 2

获取歌曲名称和艺术家时，需要限制选择器的范围。

$('.song').each(function (index, value) {
    $songTitle = $('.song-title', value).text();
    $songArtist = $('.song-artist', value).text();

    $player.append('<div class="song-info d-flex flex-column"><div class="serif font-italic">' + $songTitle + '</div><div class="small">' + $songArtist + '</div>');
});