如何使用 jQuery 或 javascript 编辑父标签的 html？答案

【问题标题】：How to edit html of parent tag using jQuery or javascript?如何使用 jQuery 或 javascript 编辑父标签的 html？
【发布时间】：2016-09-30 09:34:28
【问题描述】：

我正在使用 Shopify 来托管我的在线商店，并向我希望保持静态的页面添加了一些图片。

不幸的是，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>

我宁愿不编辑导致这种行为的原始文件，因为它正在站点范围内使用，而且我知道如果我这样做会导致其他东西停止按预期工作。

是否可以追溯删除链接标签？

感谢您的任何建议！

【问题讨论】：

标签： javascript jquery html fancybox liquid

【解决方案1】：

使用.unwrap()jQuery函数。

请检查下面的sn-p。

$(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(); });
是的，没错。请同时检查更新的 sn-p。在第一张图片中，我设置了 id，因此链接已从第一张图片中展开，并且链接尚未从第二张图片中打包。
我仍然无法定位 ID。可能有其他东西覆盖它，但我不知道它是什么。不过，我可以看到您的示例效果很好。感谢您的帮助:)

【解决方案2】：

您可以尝试使用 jQuery 展开功能。

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

Link to jQuery doc

【讨论】：

感谢@christiangh，我设法让它与它一起工作。是否可以将两个答案标记为正确？