jQuery Получить идентификаторы по названию класса

Question

У меня есть страница о 15-20 видео YouTube. Я хочу динамически обновлять img src, чтобы указать на миниатюры, размещенные на YouTube. С логической точки зрения я хочу найти каждый DIV с классом «видео», получить идентификатор этого класса и обновить источник изображения с динамически вставленным значением, например http://img.youtube.com/vi/DbyNtAQyGs/0.jpg в первом примере. Все идентификаторы уникальны, потому что они являются идентификаторами видео YouTube и есть только один тег img под каждым классом «видео».

Этот код запускается при загрузке страницы, поэтому он должен быть довольно быстрым, чтобы гарантировать, что значения установлены до того, как браузер передает каждый тег img в DOM. Надеясь, что я могу получить один из этих лайнеров вместо vars и нескольких строк.

<div id="DbyNtAQyGs" class="videos"> 
    <a href="javascript: void(0);" onclick="loadPlayer($(this).closest('div').attr('id'));)"><img src="" width="212" height="124" /></a> 
</div> 
<div id="Fh198gysGH" class="videos"> 
    <a href="javascript: void(0);" onclick="loadPlayer($(this).closest('div').attr('id'));)"><img src="" width="212" height="124" /></a> 
</div> 

Текущий код

$('.videos img').attr('src', 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id')); + '/0.jpg'); 

Answer 1

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

$('.videos img').attr('src', function() { return 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id') + '/0.jpg'; }) 

Answer 2

Петля через элементы .videos:

$('.videos').each(function(){ 
    var $this = $(this), 
     _id = $this.attr('id'); // Capture the ID 

    // Construct the img src 
    $this.find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg'); 
}); 

Bonus: цепь в случае щелчка для вашего якоря:

$this.find('a').click(function(e){ 
    e.preventDefault(); 
    loadPlayer(_id); 
}).find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg'); 

Таким образом, вы можете упростить разметку:

<div id="DbyNtAQyGs" class="videos"> 
    <a href="#"><img src="" width="212" height="124" /></a> 
</div>