如何使用jQuery或JavaScript编辑父标记的html？

问题描述：

我正在使用Shopify托管我的在线商店，并将一些图像添加到了我希望成为静态的页面。如何使用jQuery或JavaScript编辑父标记的html？

不幸的是，Shopify希望使用fancybox将它们变成灯箱，并且它将我提供的图像转换为链接标签的子项。因此，在代码中，我可以编辑，我看到：

<div style="text-align: center;"> 
<img src="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" alt="elle decoration magazine" style="display: inline-block; padding: 0 25px;"/> 
</div>

但是当我加载页面已经做到了这一点：

<div style="text-aling: center;"> 
<a href="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" class="fancyboximg"> 
    <img src="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" alt="elle decoration magazine" style="display: inline-block; padding: 0 25px;"/> 
</a> 
</div>

我宁愿不修改原始文件引起此行为，因为它在网站范围内使用，而且我知道如果我这样做，我会导致其他事情停止工作。

是否可以反向删除链接标记？

感谢您的任何建议！

答

使用.unwrap() jQuery函数。

请检查下面的代码段。

$(document).ready(function(){ 
 
    $('.fancyboximg > #remove-fancy').unwrap(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="text-aling: center;"> 
 
    <a href="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" class="fancyboximg"> 
 
    <img id="remove-fancy" src="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" alt="elle decoration magazine" style="display: inline-block; padding: 0 25px;"/> 
 
    </a> 
 

 
    <a href="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" class="fancyboximg"> 
 
    <img src="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" alt="elle decoration magazine" style="display: inline-block; padding: 0 25px;"/> 
 
    </a> 
 
</div>

感谢您的答复。有没有办法将该脚本本地化为单个div？目前，它导致页面上其他图像消失。 –

对于它你应该不得不给当前img一个唯一的ID和选择器将与ID和展开将只发生该特定的div。 –

会是这样吗？对不起，我在jquery中经验不足... $（document）.ready（function（）{（'。fancyboximg>＃remove-fancy'）。unwrap（）; }）; –

答

您可以用jQuery的展开函数尝试。

var imgTags = $("img");  
if (imgTags.parent().is("a")) { imgTags.unwrap(); }

Link to jQuery doc

谢谢@christiangh，我设法让它工作。是否有可能标记两个答案是正确的？ –

如何使用jQuery或JavaScript编辑父标记的html？

相关推荐