用其他div包裹div中的图像

时间:2017-12-27 00:02:09

标签: javascript ckeditor photo

有来自服务器的图片:

<div class="storyDetail">
 <img src="img/photo.jpg" height="180" width="300" style="float:left;">
</div>

现在我想在页面加载时通过javascript更改此图像:

<div class="storyDetail">
 <div class="insta-gallery">
  <a href="img/photo.jpg" class="tt-lightbox">
    <img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
  </a>
 </div>
</div>

我已经尝试过Javascript但没有得到任何结果,因为我对Javascript并不陌生!

2 个答案:

答案 0 :(得分:0)

我在MR。@ sinisake的帮助下得到了答案。

<!-- Getting Image 'Src' -->
var storyDetailImageSrc= $('.storyDetail').find('img').attr('src');

<!-- Wrapping image with required div(s) --> 
$('.storyDetail img').wrap('<a href="'+storyDetailImageSrc+'" class="tt-lightbox">');
$('.tt-lightbox').wrap('<div class="insta-gallery">');

答案 1 :(得分:0)

更改文字:

  1. 为您的div添加ID:
  2. <div class="storyDetail" id="storyDetail01">

    1. 定义一个函数:

      function changeText {
      document.getElementById("storyDetail01").innerHTML = 
      ' <div class="insta-gallery">
        <a href="img/photo.jpg" class="tt-lightbox">
          <img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
        </a>
       </div>';
      return false;  }
      
    2. 将该功能放在加载页面时执行Javascript的任何位置。

    3. 如果不确定你为此目的做了什么,但最容易 - 也是最脏的 - 就是在html的底部添加一个scirpt

          <body> -> that's your html page body
      --- code code...
      
          <script type="text/javascript">
              changeText();
          </script>
      </body>