0

我是 jQuery 的新手，我在让这个东西正常工作时遇到了一些麻烦。

<ul id="mediaGallery">
    <li><a href="#">https://www.youtube.com/watch?v=YVw7eJ0vGfM</a></li>
    <li><a href="#">https://www.youtube.com/watch?v=LW0k4eOEJ4U</a></li>
    <li><a href="#">https://www.youtube.com/watch?v=_SM7jtNOTXg</a></li>
</ul>

这个想法是获取 url 的最后一部分（例如：YVw7eJ0vGfM），清空<a>元素并将其替换为 an<img>并在图像的 src 路径的末尾返回 url 的最后一部分以显示缩略图youtube 视频动态。

//get the content of the <a> element
var video_href = $('#mediaGallery li a').html();

//get the last part of the url
var id_video = video_href.substr(video_href.length - 16);

//predifined img html whith the id of the video
var img_path = $('<img src="http://img.youtube.com/vi/'+id_video+'/0.jpg" />');

//empty the <a> element
$('#mediaGallery li a').empty();

//insert the img var
$('#mediaGallery li a').append(img_path);

问题是只有第一个视频 id 被返回并粘贴到 all 中<a>。

我怎样才能返回每个视频 ID 而不仅仅是第一个？

任何帮助将不胜
感激谢谢。

4

4 回答 4

2

将其包装在 $.each 中：

$('li a','#mediaGallery').each(function() {
    var me = $(this),
        id = me.html().substr(video_href.length - 16);
    me.empty().append($('<img />').attr('src', 'http://img.youtube.com/vi/'+id+'/0.jpg')
});
于 2012-11-15T21:28:06.790 回答
1

如果视频在id后面还有其他参数怎么办？我建议您在与 each 迭代的每个链接上使用简单的正则表达式提取id。

$('#mediaGallery li a').each( function() {
  var id = /\?v=(\w+)/.exec( $(this).text() )[1];
  ...
});

这应该可以帮助您走上正确的道路。

于 2012-11-15T21:29:17.460 回答
0

用一个$.each loop

$('#mediaGallery li a').each(function(){
    var video_href = $(this).html();
    var id_video = video_href.split("=")[1];

    var img_path = $('<img src="http://img.youtube.com/vi/'+id_video+'/0.jpg" />');

    $(this).empty().html(img_path);

});

检查小提琴

于 2012-11-15T21:31:26.263 回答
0

您需要使用每个循环： 

 $("#mediaGallery li a").each(function() {
    //get the content of the <a> element
        var video_href = $(this).html();

        //get the last part of the url
        var id_video = video_href.substr(video_href.length - 16);

        //predifined img html whith the id of the video
        var img_path = $('<img src="http://img.youtube.com/vi/'+id_video+'/0.jpg" />');

        //empty the <a> element
        $(this).empty();

        //insert the img var
        $(this).append(img_path);
    }
于 2012-11-15T21:28:58.187 回答