如何使用 jQuery 或 javascript 编辑父标签的 html?
How to edit html of parent tag using jQuery or javascript?
我正在使用 Shopify 托管我的在线商店,并已将一些图片添加到我希望是静态的页面。
不幸的是,Shopify 想使用 fancybox 将它们变成灯箱,它正在将我提供的图像变成 link 标签的子标签。所以在我可以编辑的代码中,我看到了这个:
<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>
我不想编辑导致此行为的原始文件,因为它在整个站点范围内使用,而且我知道如果我这样做,我会导致其他东西按预期停止工作。
是否可以追溯删除 link 标签?
感谢任何建议!
使用.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>
您可以尝试使用 jQuery 解包函数。
var imgTags = $( "img" );
if ( imgTags.parent().is( "a" ) ) { imgTags.unwrap(); }
我正在使用 Shopify 托管我的在线商店,并已将一些图片添加到我希望是静态的页面。
不幸的是,Shopify 想使用 fancybox 将它们变成灯箱,它正在将我提供的图像变成 link 标签的子标签。所以在我可以编辑的代码中,我看到了这个:
<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>
我不想编辑导致此行为的原始文件,因为它在整个站点范围内使用,而且我知道如果我这样做,我会导致其他东西按预期停止工作。
是否可以追溯删除 link 标签?
感谢任何建议!
使用.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>
您可以尝试使用 jQuery 解包函数。
var imgTags = $( "img" );
if ( imgTags.parent().is( "a" ) ) { imgTags.unwrap(); }