Question

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

此代码将在页面加载时运行，因此必须非常快速地确保在浏览器传递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');

Answer 1

您可以使用：

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

Answer 2

遍历.videos元素：

SELECT IDs.ID, ISNULL(Records.A, "No Data Available")[, ...n]
FROM @TableOfIDs IDs
    OUTER APPLY (
        <query returning results you are interested in>
        WHERE IDs.ID = InnerIDTable.ID
    ) Records

奖励：您锚点击事件中的链条：

$('.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');

jQuery按类名

2 个答案: