imgの後に "</a>"をjQueryで追加すると、要素の前に追加されます

Question

私は別の会社によって開発されている.NETアプリケーションを使っています。彼らは自分のjsとcssファイルを挿入することを許可しているので、jQueryを使ってHTMLを修正しています。

記事の左上にサムネイルがあり、サムネイルの前後にコードを追加して画像を追加してリンクを追加しています。

しかし、ファイヤーバグの要素を調べると、画像の前に何らかの理由で両方の部分が終了します。 img要素が正しく閉じられていない可能性がありますか？

マイHTML（正確には、私はJSせずに、それを編集することはできませんよう）：

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

私のjQuery：

<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> 

Answer 1

：私が終わる何

$(".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>'); 

}); 

あなたはマークアップを考えていますが、ブラウザはテキストから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>'); 
});