如何使用锚标记包装图像标记以使其可点击？

Question

Hy，我有以下情况：我正在尝试更改我的feedly-index页面的设计。 （我不能改变HTML）我面临一个问题，我不能解决过去两个小时。

在HTML中有一些带有随机ID的div元素和末尾的“_content”。在这些div中有一个img标签 - 我想要做的是用im-tag包装一个锚标签以使其可点击。

      Situation:
      <div id='{SOME_RANDOM_ID}_content'>
          // a bit of text, a few <br> and some other tags here
          <img src='LINK_TO_AN_IMAGE'>
      </div>


      What I want as outcome:
      <div id='{SOME_RANDOM_ID}_content'>
         // a bit of text, a few <br> and some other tags here
         <a href='LINK_TO_AN_IMAGE'> 
                <img src='LINK_TO_AN_IMAGE'> 
         </a>
      </div>

CSS甚至可以实现这一点吗？

我可以使用JavaScript，但div是通过AJAX动态加载的：/所以JavaScript脚本只运行当前的div而不是动态加载的div。

Answer 1

仅使用CSS是不可能的，因为CSS是指页面的样式或样式，而不是向页面添加动态元素。

但我们可以使用JS来做到这一点。

在使用ajax调用创建这些元素时。在ajax调用的成功回调中，您可以使用a标记包装图像。

例如：

$.ajax({
   url : "/make.php"
}).done(function() {
   var images = $("div img");
   $.each(images, function() {
     $(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
   });
});

DEMO

Answer 2

如果你无法编辑html，这可能会很棘手。

它不能用纯css来完成... css无法创建链接..我的意思是我可以使用js，除此之外如果id是随机的，它会使它变得更加困难。 - 额外的 -

如果你可以将div中包含div的整个区域包装在div中，那么你可能有机会使用jquery ...

e.g：

<div id="holderdiv">

<div id='{SOME_RANDOM_ID}_content'>
          // a bit of text, a few <br> and some other tags here
          <img src='LINK_TO_AN_IMAGE'>
      </div>

</div>

然后，您可以使用jquery使#holderdiv> div> img的所有实例成为图像路径的链接？