在img之後添加「</a>」jQuery將它添加到元素之前

我正在使用由另一家公司開發的.NET應用程序。他們允許我注入我自己的js和css文件，所以我使用jQuery來修改他們的HTML。在img之後添加「</a>」jQuery將它添加到元素之前

我們在文章的左上角有縮略圖，我在縮略圖之前和之後添加代碼以添加一個燈箱以添加鏈接。

但是它不起作用，並且由於某種原因，如果我檢查Firebug中的元素，兩個部分都會在圖像之前結束。難道是因爲img元素沒有正確關閉？

我的HTML（準確地說，我不能沒有JS編輯）：

<div class="news-image"> 
    <img src="image.jpg?thumb=1" alt="Article with picture "> 
</div>

我的jQuery：

$(".news-image img").each(function(){ 
    var newsimgurl = $(this).attr("src").replace('thumb=1','thumb=0'); 

    $(this).before('<a href="'+newsimgurl+'" data-lightbox="lightbox">'); 
    $(this).after('</a>'); 

});

我到底是什麼了：

<div class="news-image"> 
    <a href="image.jpg?thumb=0" data-lightbox="lightbox"> </a> 
    <img src="image.jpg?thumb=1" alt="Article with picture "> 
</div>

來源

2016-05-17 s1h4d0w

DOM不是HTML的字符串。沒有添加元素的「開始」和「結束」。您只需添加整個元素對象並向其添加內容即可。 – 2016-05-17 12:46:53

@squint：哦，真的很好，我必須記住並無恥地重複使用它。 –

@ T.J.Crowder：請做！ :) – 2016-05-17 12:54:12

您正在考慮使用標記，但瀏覽器在從文本轉換爲DOM元素時僅使用標記。一旦你處理DOM，你正在處理對象。

對於您的情況，您希望創建一個a對象，將其插入img所在的位置，然後將img移入其中。碰巧，jQuery有這樣的功能：wrap：

$(".news-image img").each(function(){ 
    var newsimgurl = $(this).attr("src").replace('thumb=1','thumb=0'); 

    $(this).wrap('<a href="'+newsimgurl+'" data-lightbox="lightbox"></a>'); 
});

來源

2016-05-17 12:46:49

謝謝你的完整答案。這使它工作！ – s1h4d0w

@FreeAsInBeer：感謝您的編輯！ –

@ T.J.Crowder沒問題。絕對是我修正的更有趣的拼寫錯誤之一！ – FreeAsInBeer

在img之後添加「</a>」jQuery將它添加到元素之前

回答

相關問題