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 Script只会运行当前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＆gt;的所有实例div> img 指向图片路径的链接？

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

2 个答案: