特定のIDを持つdiv内の次の要素を取得する方法

Question

jsにはかなり新しいので、基本を取得しようとしています。

は私が曲のリストを持つdiv要素持っているプロジェクトがあります。私のHTMLで

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

を、すべてのpタグは、それに書かれた「再生」とその内部のスパンを持っている、と私はその機能を実装しようとしています。

私は.playと.pauseなどを使用する方法を知っていますが、私の問題はクリックされた曲のオーディオ要素に到達する方法です。ここでは、私が試してみましたものです：

のjQuery：

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

     alert(myId); 
}); 

私が欲しいのは、今の要素を取得することです。私のロジックは、タグのスパンがpタグの内側にあるので、クリックしたスパンから始めて親の最初のタグ（pタグ）に移動し、next（）という引数を "song"とすると、オーディオ）を歌のIDで区切って入力します。

しかし、警告ボックスには「未定義」が表示されます。

私は間違っていますか？

Answer 1

あなたはタイプミスを持っています。歌はクラスで、IDではありません：

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

Answer 2

次の要素（次の直後の要素の兄弟）は、nextElementSibling DOMプロパティで取得されます。これをnextSibling DOMプロパティと混同してはなりません。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>