jQuery 通过类名获取 ID答案

【问题标题】：jQuery Get IDs by Class NamejQuery 通过类名获取 ID
【发布时间】：2016-06-13 21:12:39
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

你可以使用：

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

【讨论】：

【解决方案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>

【讨论】：