jQuery IDs nach Klassenname erhalten

Question

Ich habe eine Seite mit etwa 15-20 YouTube-Videos Ich möchte die img src dynamisch aktualisieren, um auf die von YouTube gehosteten Thumbnails zu verweisen. Aus logischer Sicht möchte ich jeden DIV mit einer Klasse von "Videos" finden, die ID dieser Klasse erhalten und die Bildquelle mit dem dynamisch eingefügten Wert aktualisieren, z. B. http://img.youtube.com/vi/DbyNtAQyGs/0.jpg im ersten Beispiel. Alle IDs sind einzigartig, da es sich um die YouTube-Video-IDs handelt und es unter jeder "videos" -Klasse nur ein img-Tag gibt.

Dieser Code würde beim Laden der Seite ausgeführt, so dass es ziemlich schnell sein müsste, um sicherzustellen, dass die Werte festgelegt werden, bevor der Browser jedes IMG-Tag im DOM übergibt. Ich hoffe, ich kann einen dieser Liner anstelle von Vars und mehreren Linien bekommen.

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

aktuellen Code

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

Answer 1

können Sie verwenden:

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

Answer 2

Schleife durch die .videos Elemente:

$('.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: Kette in dem Click-Ereignis für Ihren Anker:

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

So können Sie Ihr Markup vereinfachen:

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