Блог

Как я мог бы написать javascript, который выполняет итерацию по таблице, захватывает класс, а затем заменяет его изображением? Так, например, у меня есть таблица со столбцами, к которым добавлены числовые классы:

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

Эти числа совпадают с именами изображений, которые я хочу загрузить с помощью javascript после завершения обработки остальной части запроса. Таким образом, конечный продукт будет выглядеть так :

 <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 — это вариант для меня.

Вы могли бы сделать что-то подобное с помощью 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 массив, чтобы он соответствовал вашим реальным данным, но базовая техника должна работать.