Javascript 加入“</a>&引用；在img之后，jQuery将其添加到元素之前

我正在使用另一家公司开发的.NET应用程序。他们允许我注入自己的js和css文件，所以我使用jQuery修改他们的HTML

我们在文章的左上角有缩略图，我通过在缩略图之前和之后添加代码来添加链接，从而在图像中添加lightbox

但是它不起作用，并且由于某种原因，如果我检查Firebug中的元素，这两个部分都会出现在图像之前。可能是因为img元素没有正确关闭吗

我的HTML（完全正确，因为没有js我无法编辑）：

我的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>');

});

$（“.news image img”）.each（函数（）{
var newsimgurl=$（this.attr（“src”）.replace（'thumb=1'，'thumb=0'）；
$（本）。在（''）之前；
});

我的结局是：

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

---

您考虑的是标记，但浏览器仅在从文本转换为DOM元素时使用标记。处理DOM之后，就要处理对象

在本例中，您希望创建一个

a

对象，将其插入

img

所在的位置，然后将

img

移动到其中。碰巧，jQuery有一个函数：

$（“.news image img”）.each（函数（）{
var newsimgurl=$（this.attr（“src”）.replace（'thumb=1'，'thumb=0'）；
$（此）.wrap（“”）；
});

您考虑的是标记，但浏览器仅在从文本转换为DOM元素时使用标记。处理DOM之后，就要处理对象

在本例中，您希望创建一个

a

对象，将其插入

img

所在的位置，然后将

img

移动到其中。碰巧，jQuery有一个函数：

$（“.news image img”）.each（函数（）{
var newsimgurl=$（this.attr（“src”）.replace（'thumb=1'，'thumb=0'）；
$（此）.wrap（“”）；
});

DOM不是一个HTML字符串。不能添加元素的“开始”和“结束”。您只需添加整个元素对象并向其添加内容。@斜视：噢，说得很好，我必须记住并无耻地重用它。@T.J.Crowder:请这样做！：）谢谢你，斜视，我不知道。我已经很久没有使用javascript了，我还在学习修改DOM的所有细节。不客气。当您意识到DOM只是一个对象树结构时，它就变得简单多了。HTML中的所有内容都转换为结构中的某种对象表示形式。DOM不是HTML字符串。不能添加元素的“开始”和“结束”。您只需添加整个元素对象并向其添加内容。@斜视：噢，说得很好，我必须记住并无耻地重用它。@T.J.Crowder:请这样做！：）谢谢你，斜视，我不知道。我已经很久没有使用javascript了，我还在学习修改DOM的所有细节。不客气。当您意识到DOM只是一个对象树结构时，它就变得简单多了。HTML中的所有内容都会转换为结构中的某些对象表示形式。感谢您提供完整的答案。这就成功了@T.J.Crowder没问题。肯定是我修复的一个更有趣的打字错误！谢谢你完整的回答。这就成功了@T.J.Crowder没问题。肯定是我修复的一个更有趣的打字错误！

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

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

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