每個元素的返回值

我是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不只是第一個？

任何幫助將大大降低
謝謝。

來源

2012-11-15 Tonani

你必須要麼使用的.html的html的（功能）的簽名，或者使用$（）。每個（）遍歷他們。 '.empty（）'.append（el）'應該替換爲'.html（el）' –

使用$.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); 

});

Check Fiddle

來源

2012-11-15 21:31:26

謝謝，它的工作原理：] – Tonani

@Tonani ..不用謝：） –

包裝這個在$。每個：

$('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-15 21:28:06 nullable

您需要使用每個循環：

$("#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-15 21:28:58 malificent

如果視頻具有ID之後其他參數？我建議你在每個鏈接上用each迭代一個簡單的正則表達式來提取id。

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

這應該有助於您走上正確的道路。

來源

2012-11-15 21:29:17 elclanrs

+1使用'text'而不是'html' – Bergi

每個元素的返回值

回答

相關問題