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

时间:2009-10-13 12:32:10

标签: jquery html css

我想转换下面的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>

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

你应该可以这样做:


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

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

答案 3 :(得分:0)

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