如何獲取具有特定ID的div中的下一個元素

Question

對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>

在我的html中，每個p標簽內部都有一個跨度，上面寫有“ play”，我正在嘗試實現該功能。

我知道如何使用.play和.pause等...，但是我的問題是如何獲得所點擊歌曲的音頻元素。 這是我嘗試過的：

jQuery的：

  $(".title").click(function() {
      var myAudioElement = $(this).parent().next("#song");
      var myId = myAudioElement.attr('id');

      alert(myId);
});

我想要的只是暫時了解該元素。 我的邏輯是，標簽跨度位於p標簽內，因此，從單擊的跨度開始，我需要先到達其父級（p標簽），然后再將帶有參數“ song”的next（）賦予下一個元素（ div中帶有歌曲ID的音頻）。

但是警告框返回“ undefined”。

我究竟做錯了什么？

Answer 1

你有錯字 歌曲是一類，而不是ID：

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

Answer 2

通過nextElementSibling DOM屬性獲取緊隨其后的下一個元素（緊接在緊接着的元素同級之后）。 請勿將它與nextSibling DOM屬性混淆，該屬性將返回初始指定節點之后的任何節點。

Answer 3

您可以簡單地使用：

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

希望這可以幫助。

 $(".title").click(function() { var myAudioElement = $(this).parent().next("audio"); var myId = myAudioElement.attr('id'); console.log(myId); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>