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

Question

У меня есть код, который нуждается в настройке. Мне нужно, чтобы .play «rel» был заменен на «id» .audio_player. Там будет несколько «медиа» 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> 

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

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

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

Answer 1

Попробуйте

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

Fiddle here

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

Вы могли бы использовать это:

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

Отъезд this jsfiddle, чтобы увидеть его в действии.

Answer 6

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

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

проверки скрипка here

Answer 7

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