How to get the next element in a div with a specific Id

Question

fairly new to js, so trying to get the basics.

I have a project in which I have a div with a list of songs:

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

In my html, every p tag has a span inside it with "play" written on it, and I am trying to implement that functionality.

I know how to use .play and .pause etc... but my problem is how to get to the audio element for the song clicked. Here is what I have tried:

jQuery :

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

      alert(myId);
});

All I want is to get to the element for now. My logic is that the tag span is inside the p tag so, starting from the clicked span I need to get to its parent first (the p tag) and then next() with the argument "song" will give me the next element (audio) in the div with the id of song.

But the alert box comes back with "undefined".

What am I doing wrong?

Answer 1

You have a typo. song is a class, not an id:

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

Answer 2

Getting the next element that follows one (next following immediate element sibling) is done via the nextElementSibling DOM property. This should not be confused with the nextSibling DOM property, which will return whatever node follows the initially specified node.

Answer 3

You could use simply :

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

Hope this helps.

 $(".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>