Javascript 如何获取具有特定Id的div中的下一个元素

对js来说是相当新的，所以尝试获取基本知识

我有一个项目，其中我有一个div，其中有一个歌曲列表：

<div id="songs">
  <p>01 a la verticale <span class="title">[play]</span></p>
  <audio class="song" id="verticale" src="Songs/01_a_la_verticale.mp3" onended="audioEnd()"></audio>

  <p>02 éphémère <span class="title">[play]</span></p>
  <audio class="song" id="ephemere" src="Songs/02_ephemere.mp3" onended="audioEnd()"></audio>

  <p>03 geste humain <span class="title">[play]</span></p>
  <audio class="song" id="geste" src="Songs/03_geste_humain.mp3" onended="audioEnd()"></audio>

  <p>04 la seule chose <span class="title">[play]</span></p>
  <audio class="song" id="chose" src="Songs/04_la_seule_chose.mp3" onended="audioEnd()"></audio>
</div>

我现在只想进入元素。我的逻辑是，标记span位于p标记内，因此，从单击的span开始，我需要首先到达其父级（p标记），然后带有参数“song”的next（）将为我提供div中id为song的下一个元素（音频）

但警报框返回“未定义”

---

我做错了什么？

通过DOM属性获取紧跟在一个元素之后的下一个元素（紧跟在直接元素同级之后的下一个元素）。这不应与DOM属性混淆，后者将返回初始指定节点之后的任何节点。

通过DOM属性获取紧随其后的下一个元素。这不应与DOM属性混淆，DOM属性将返回初始指定节点后面的任何节点。

您可以简单地使用：

$(this).parent().next("audio");
//Or also using the general class 'song'
$(this).parent().next(".song");

希望这有帮助

$（“.title”）。单击（函数（）{
var myAudioElement=$（this.parent（）.next（“audio”）；
var myId=myAudioElement.attr（'id'）；
console.log（myId）；
});

01 a垂直方向[播放]

02éphémère[戏剧]

03格斯特·胡曼[演奏]

04拉塞尔选择[播放]

您可以简单地使用：

$(this).parent().next("audio");
//Or also using the general class 'song'
$(this).parent().next(".song");

希望这有帮助


$（“.title”）。单击（函数（）{
var myAudioElement=$（this.parent（）.next（“audio”）；
var myId=myAudioElement.attr（'id'）；
console.log（myId）；
});

01 a垂直方向[播放]

02éphémère[戏剧]

03格斯特·胡曼[演奏]

04拉塞尔选择[播放]

您有一个输入错误。song是一个类，而不是id：

var myAudioElement = $(this).parent().next(".song");

你打错了。song是一个类，而不是id：

var myAudioElement = $(this).parent().next(".song");

@gonecode，也叫JS。请参见标记。@gonecodingjquery是JavaScript@Ionut：真的吗？它还表示HTML。你选择最近的特定主题。nextElementSibling不是“jQuery方式”
.next（）
是。@gonecode，也是JS。请参见标记。@gonecodingjquery是JavaScript@Ionut：真的吗？它还表示HTML。你选择最近的特定主题。nextElementSibling不是“jQuery方式”
.next（）
是。