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'的目录不会更改。图像名称由服务器按顺序给出。

感谢adavnce

Answer 1

您可以使用.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 2

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

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

这将成为我的目标。（Demo。）但是，@ Nick Craver的.replaceWith()可能更适合这项任务。

修改
另外，如果您的选择器仅匹配this.href元素，则可以使用$(this).attr('href')代替<a>。

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

要求似乎已经改变：

如何将每张图片追加到父级，但页面上的现有跨度使用这些id的＃m1，＃m2，＃my3（其中#my3是span的id，需要放置第三个图像）。

假设：

<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>是否存在！

从链接创建图像

4 个答案: