使用类名加载相应的图像路径

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阵列以匹配您的实际数据，但基本技术应该工作。