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

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 / folder" не меняются.Имя изображения задается сервером последовательно.

Спасибо за сообщение

Answer 1

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

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

Вы можете проверить ее здесь .Это безопаснее, чем альтернатива:

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

Вы можете проверить эту версию здесь .

Answer 2

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

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

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

РЕДАКТИРОВАТЬ 2
Если необходимо заменить только ссылки на /mydir/folder/*, используйте селектор атрибута начат-с : 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();
});

Демо .

Answer 3

$('#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);
});

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

Редактировать: для добавления изображений в другие div

$('#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 4

Требование изменилось:

Как я могу добавить каждое изображение, чтобы не родительский, но на существующие промежутки на странице с этими идентификаторами # m1, # m2, # my3 (где # my3 - это идентификатор диапазона, где необходимо разместить третье изображение).

Дано:

<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>

( Демо )

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