使用類名加載相應的圖像路徑

Question

我該如何編寫JavaScript迭代通過表，抓取類，然後用圖像替換？因此，例如我有一個表有附加到他們的數字類欄目：

<td class="images 12-345"></td> 
<td class="images 98-763"></td> 

這些數字與我想查詢的其餘部分被處理完畢後，用JavaScript加載圖像名稱coorelate。所以最終產品看起來像：

<td class="images 12-345"><img src="http://site.com/12-345.jpg"></td> 
<td class="images 98-763"><img src="http://site.com/98-763.jpg"></td> 

但是，直到一切都完成加載。我想只是在那裏有一個佔位符圖形，在所有處理完成後都用正確的圖像文件替換。

我將如何遍歷這些行，然後將適當的圖像加載到每個單元格？我一直在想，我可以使用.images選擇器來檢索每個唯一的數字類名稱並將其傳遞給一個變量。然後使用該變量，我可以將它附加到圖像路徑的其餘部分，並將其放回到適當的表格單元格中。我不希望這個開始處理，直到dom的其餘部分完成加載並且原始的sql查詢完成。我能否就如何編寫此文件的最佳方式提供一些建議。 jQuery是我的選擇。

Answer 1

你可以做這樣的事情用jQuery：

$('td.images').each(function() { 
    var $td  = $(this); 
    var classes = $(this).attr('class').split(/\s+/); 
    var num  = $.grep(classes, function(c) { return c.match(/^[\d-]+$/) }); 
    if(num.length) 
     $td.append('<img src="http://site.com/' + num[0] + '.jpg">'); 
}); 

演示（只在單元格中的數字）：http://jsfiddle.net/ambiguous/vrDvc/1/

您可能需要調整$.grep，你如何處理num陣列以匹配您的實際數據，但基本技術應該工作。