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> ）を取得し、要素を空にしてそれを置き換え<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のみが返され、すべてに貼り付けられること<a>です。

最初のビデオIDだけでなく、各ビデオ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の後に他のパラメータがある場合はどうなりますか？各リンクで反復する各リンクの単純な正規表現を使用してIDを抽出することをお勧めします。

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

それはあなたが正しい道を歩むのに役立つはずです。

于 2012-11-15T21:29:17.460 に答える
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 に答える
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 に答える