jQuery按类名获取ID

我有一个约15-20个YouTube视频的页面我想动态更新img src以指向YouTube托管的缩略图。从逻辑的角度来看，我希望找到每个DIV都带有一类“视频”，获取该类的ID并使用动态插入的值更新图像源，例如，第一个示例中的http://img.youtube.com/vi/DbyNtAQyGs/0.jpg。所有ID都是唯一的，因为它们是YouTube视频ID，每个“视频”类下只有一个img标记。jQuery按类名获取ID

此代码可以在页面加载时运行，因此它必须非常快速以确保在浏览器传递DOM中的每个img标记之前设置值。希望我能得到其中一个衬里，而不是变量和多条线。

<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');

来源

2016-06-13 user1754738

您可以使用：

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

来源

2016-06-13 21:17:36 j08691

循环遍历.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'); 
});

名奖金：链在你的锚单击事件：

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

来源

2016-06-13 21:22:29 JeffreyPia

jQuery按类名获取ID

回答

相关问题