Question

我想转换下面的html图片标记

<img src="img-1.jpg" width="290" height="420" class="frameImage" />

使用jquery下面的代码。

<table class="frame" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="border-top" colspan="3"></td>
  </tr>
  <tr>
    <td class="border-left"></td>
    <td><div class="image-frame"><img src="img-1.jpg" width="290" height="420" class="frameImage" />
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-right"></div>
        <div class="bottom-left"></div>
      </div></td>
    <td class="border-right"></td>
  </tr>
  <tr>
    <td class="border-bottom" colspan="3"></td>
  </tr>
</table>

Answer 1

将没有图像的整个表附加到文档中。
使用“image-frame”类找到div并将图像放入其中。

Answer 2

$('img[src=img-1.jpg]').before('<table class="frame" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="border-top" colspan="3"></td>
  </tr>
  <tr>
    <td class="border-left"></td>
    <td><div class="image-frame"><img src="img-1.jpg" width="290" height="420" class="frameImage" />
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-right"></div>
        <div class="bottom-left"></div>
      </div></td>
    <td class="border-right"></td>
  </tr>
  <tr>
    <td class="border-bottom" colspan="3"></td>
  </tr>
</table>').remove();

Answer 3

你应该可以这样做：


    $('.image-frame').html('<img src="img-1.jpg" width="290" height="420" class="frameImage" /%gt;')

但它需要先打印表格，然后将图像插入表格

Answer 4

这不是答案，但您可能对jQuery-ImageFrame感兴趣。

如何在图像标签周围包装html标签？

4 个答案: