如何使用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>

我寧願不修改原始文件引起此行爲，因爲它在網站範圍內使用，而且我知道如果我這樣做，我會導致其他事情停止工作。

是否可以反向刪除鏈接標記？

感謝您的任何建議！

來源

2016-09-30 Jack Watson

使用.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>

來源

2016-09-30 09:37:25

感謝您的答覆。有沒有辦法將該腳本本地化爲單個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

來源

2016-09-30 09:42:27 ChristianGH

謝謝@christiangh，我設法讓它工作。是否有可能標記兩個答案是正確的？ –

如何使用jQuery或JavaScript編輯父標記的html？

回答

相關問題