jQuery按類名獲取ID

我有一個約15-20個YouTube視頻的頁面我想動態更新img src以指向YouTube託管的縮略圖。從邏輯的角度來看，我希望找到每個DIV都帶有一類「視頻」，獲取該類的ID並使用動態插入的值更新圖像源，例如，第一個示例中的http://img.youtube.com/vi/DbyNtAQyGs/0.jpg。所有ID都是唯一的，因爲它們是YouTube視頻ID，每個「視頻」類下只有一個img標記。jQuery按類名獲取ID

此代碼可以在頁面加載時運行，因此它必須非常快速以確保在瀏覽器傳遞DOM中的每個img標記之前設置值。希望我能得到其中一個襯裏，而不是變量和多條線。

<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');

來源

2016-06-13 user1754738

您可以使用：

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

來源

2016-06-13 21:17:36 j08691

循環遍歷.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>

來源

2016-06-13 21:22:29 JeffreyPia

jQuery按類名獲取ID

回答

相關問題