Question

I have some code that needs adjusting. I need the .play “rel” to be replaced with the .audio_player “id”. There will be multiple “media” divs that will need to be gone through.

Here is the code

<div class="media">
    <div class="message_buttons">
        <li id="listen" class="play_button">
            <a class="play" rel="" href="AudioFile.mp3"> Listen </a>
        </li>
    </div>
    <div class="audio_player" id="play1243">
        <audio controls="controls"></audio>
    </div>
</div>

And here is the script I have so far. It seems to work with the first media div, but then makes every .play “rel” on the page the same as the first audio_player “id” and not the “id” in it’s own div.

$.each($('.play'), function( index ) {
    //$(this).attr("rel", $(".audio_player").attr("id"));
    $(".play").attr("rel", $(".audio_player").attr("id"));
});

I commented-out another version that also works but gives the same result. Thank you guys so much for helping me get this far. I feel like I am really really close now. But can’t get it that last little bit. Thank you for your time.

Answer 1

Try

$('.play').each(function(){
   $(this).attr("rel",$(this).closest('.message_buttons').next('.audio_player').attr('id'));
});

Fiddle here