Создание изображений из ссылок

Question

<td id="anchToImg"> 
<a href="/mydir/folder/anyImg-1.jpg">my anchor1</a> 
<a href="/mydir/folder/anyImg-2.jpg">my anchor2</a> 
</td> 

мне нужно, чтобы это было так после того, как JQuery применяется

<td id="anchToImg"> 
<img src="/mydir/folder/anyImg-1.jpg" class="myiImg"> //changed to image;anchor text removed 
<img src="/mydir/folder/anyImg-2.jpg" class="myiImg"> //changed to image;anchor text removed 
</td> 

Примечание: Справочники ссылки «/ MYDIR/папки» не изменяется. Название изображения задается сервером последовательно.

Спасибо adavnce

Answer 1

$('#anchToImg > a').each(function() { 
    var $this = $(this), 
     $parent = $(this).parent(), 
     $image = $(document.createElement('img')), 
     url  = $(this).attr('href'); 

    $image.load(function() { 
     $this.remove(); 
     $(this).appendTo($parent); 
    }).attr('src', url); 
}); 

Внутри документа готового

Edit: Для добавления изображения в другие дивы

$('#anchToImg > a').each(function(e) { 
    var $this = $(this), 
     $parent = $(this).parent(), 
     $image = $(document.createElement('img')), 
     url  = $(this).attr('href'), 
     $thediv = $('#my' + (e+1)); 

    $image.load(function() { 
     $this.remove(); 
     $(this).appendTo($thediv); 
    }).attr('src', url); 
}); 

Answer 2

Вы можете использовать .replaceWith() и функцию, как это, как это :

$("#anchToImg a").replaceWith(function() { 
    return $("<img />", { src: this.href, "class": "myiImg" }); 
}); 

You can test it here. Это более безопасно, чем альтернатива:

$("#anchToImg a").replaceWith(function() { 
    return '<img src="'+ this.href + '" class="myiImg" />'; 
}); 

You can test that version here.

Answer 3

$('#anchToImg a').each(function(i) { 
    var img = '<img src="' + $(this).attr('href') + '" class="myiImg" />'; 
    $(this).after(img).remove(); 
}); 

Собирался быть моим выстрелом в этом. (Demo.) Однако @Nick Craver's .replaceWith(), вероятно, больше подходит для задачи.

EDIT
Кроме того, вы могли бы просто использовать this.href вместо $(this).attr('href') если ваш селектор только матчи <a> элементы.

EDIT 2
Если только ссылки на /mydir/folder/* следует заменить, используйте attribute-starts-with селектор: a[href^="/mydir/folder/"]:

$('#anchToImg a[href^="/mydir/folder/"]').each(function(i) { 
    var img = '<img src="' + $(this).attr('href') + '" class="myiImg" />'; 
    $(this).after(img).remove(); 
}); 

Demo.

Answer 4

Требования, кажется, изменился:

Как я могу добавить каждое изображение не родителей, но к существующим пролетам на странице с # m1 этих идентификаторов, # м2, # MY3 (где # MY3 является id span, где необходимо разместить третье изображение).

Дано:

<table> 
    <tr> 
     <td id="anchToImg"> 
      <a href="/mydir/folder/anyImg-1.jpg">my anchor1</a> 
      <a href="/mydir/folder/anyImg-2.jpg">my anchor2</a> 
      <a href="/no/something.jpg">my anchor1</a> 
     </td> 
    </tr> 
</table> 

<span id="m1"></span> 
<span id="m2"></span> 

Вы можете использовать:

$('#anchToImg a[href^="/mydir/folder/"]').each(function() { 
    var href = $(this).attr('href'); // Relative 
    var num = href.substring(21, href.indexOf('.')); // Find number 
    var $target = $('#m' + num); 
    var $img = $('<img />', {src: href, 'class': 'myiImg'}); 
    $img.appendTo($target); 
    //$(this).remove(); -- if the link should be removed 
}); 

Для того, чтобы получить:

<table> 
    <tbody><tr> 
     <td id="anchToImg"> 
      <a href="/mydir/folder/anyImg-1.jpg">my anchor1</a> 
      <a href="/mydir/folder/anyImg-2.jpg">my anchor2</a> 
      <a href="/no/something.jpg">my anchor1</a> 
     </td> 
    </tr> 
</tbody></table> 

<span id="m1"><img src="/mydir/folder/anyImg-1.jpg" class="myiImg"></span> 
<span id="m2"><img src="/mydir/folder/anyImg-2.jpg" class="myiImg"></span> 

(Demo)

Однако, он никогда не проверяется, что существует #mN до добавления <img>!