我有以下代码将在 div 中查找并查找所有图像。然后它将图像包装在一个新的 div 中,创建第二个包含按钮的 div,这用于使用另一个脚本执行图像悬停效果
$(document).ready(function(){
// Get the images from whatever element contains them.
var postImgs = $('#primary img');
postImgs.each(function applyPinterestButton(){
// This allows the post-writer to add a class of "nopin" to
// whatever images they don't want to have pinned.
if($(this).attr('class').indexOf('nopin') == -1){
// Wrap the image in a container.
$(this).wrap('<div class="showPin"/>');
// Add the pinterest button and link into the container.
$(this).parent().prepend('<div class ="pinIt"><a href="buttonlink.html" target="_blank"><img src="button.jpg" /></a></div>');
}
});
之前的 jQuery html 看起来像这样:
<a href="http://originalimagelink.html"><img src="originalimage.jpg"></a>
但在脚本之后,jquery 只包装 img,如下所示:
<a href="originalimagelink.html">
<div class="showPin">
<div class="pinIt">
<a href="buttonlink.html">
<img src="button.jpg">
</a>
</div>
<img src="originalimage.jpg">
</div>
</a>
我需要它来包装img
和a
元素。所以最终结果是这样的:
<div class="showPin">
<div class="pinIt">
<a href="buttonlink.html">
<img src="button.jpg">
</a>
</div>
<a href="originalimagelink.html"><img src="originalimage.jpg"></a>
</div>
我究竟做错了什么?