Jquery каждый () не работает правильно

Question

У меня есть код, который нужно настроить.Мне нужно, чтобы .play "rel" был заменен на .audio_player "id".Там будет несколько «медиа» div, которые нужно будет пройти.

Вот код

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

А вот сценарий, который у меня есть.Кажется, он работает с первым медиа-дивом, но затем делает каждый .play "rel" на странице таким же, как первый "id" audio_player, а не "id" в своем собственном div.

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

Я закомментировал другую версию, которая также работает, но дает тот же результат.Спасибо вам большое за помощьЯ чувствую, что я действительно очень близко сейчас.Но не могу получить это последнее немного.Спасибо за ваше время.

Answer 1

Просто запустите each() на селекторе, и затем вы можете использовать контекст this для каждого найденного элемента:

$('.play').each(function(i) {
    var id = $(this).parents('.media').find('.audio_player').attr('id');
    $(this).attr('rel', id);
});

Answer 2

Вы можете использовать это:

$('.play').each(function() {
    $(this).attr('rel', $(this).closest('.media').find('.audio_player').attr('id'));
});

Проверьте этот jsfiddle , чтобы увидеть его в действии.

Answer 3

Попробуйте

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

Скрипка здесь

Answer 4

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

Answer 5

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

Answer 6

вы можете сделать таким образом

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

проверьте скрипку здесь

Answer 7

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