jquery - 使用jQuery从HTML生成YouTube缩略图

Question

我正在尝试从Youtube获取缩略图，并将相应的图像插入html。

我的HTML:

<div id="first">
    <ul class="thumbnails">
        <li><a href="http://www.youtube.com/watch?v=-dzpkn29_vY"></a></li>
        <li><a href="http://www.youtube.com/watch?v=xFCRMonf7lI"></a></li>
   </ul>
</div>

<div id="second">
    <ul class="thumbnails">
        <li><a href="http://www.youtube.com/watch?v=Ps-9L0-NO"></a></li>
        <li><a href="http://www.youtube.com/watch?v=hJZCHZ2wV7U"></a></li>
    </ul>
</div>

所以我希望HTML看起来像这样:

<ul class="thumbnails">
  <li>
    <a href="http://www.youtube.com/watch?v=UBTUAHGpQqE">
      <img src="http://img.youtube.com/vi/-dzpkn29_vY/2.jpg" alt="#" />
    </a>
  </li>
  <li>
    <a href="http://www.youtube.com/watch?v=mTkPfjSXFpo">
      <img src="http://img.youtube.com/vi/xFCRMonf7lI/2.jpg" alt="#" />
    </a>
 </li>

无论如何，我可以使用在SO上找到的此功能:

function getScreen( url, size ) {
  if(url === null){ return ""; }

  size = (size === null) ? "big" : size;
  var vid;
  var results;

  results = url.match("[\\?&]v=([^&#]*)");

  vid = ( results === null ) ? url : results[1];

  if(size == "small"){
    return "http://img.youtube.com/vi/"+vid+"/2.jpg";
  } else {
    return "http://img.youtube.com/vi/"+vid+"/0.jpg";
  }
}

编辑:问题是基于每个href动态添加img

Answer 1

这是一个演示，可为您提供所需的结果。

演示:jsFiddle
Each将遍历选择集中的所有链接。要设置该值，您需要使用html函数。从带有包装的函数返回字符串会将图像设置到页面上。