jQuery 按 Class 名称获取 ID

Question

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

此代码将运行加载页面，因此必须非常快以确保在浏览器传递 DOM 中的每个 img 标记之前设置值。希望我能得到其中一种，而不是 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');
});

奖励：在锚点的点击事件中链接：

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

jQuery 按 Class 名称获取 ID

jQuery Get IDs by Class Name

javascript

jquery

jquery-selectors