jquery - 在图像的元素标签之前插入 div

Question

我有以下代码，它将在 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>

我做错了什么？

Answer 1

1. 您可能想从图像的父元素开始。

   // Get the images from whatever element contains them.    
   var postImgs = $('#primary img').parent();
                                 --^^^^^^^^^--
   

2. 您可以使用.hasClass()功能。

   // This allows the post-writer to add a class of "nopin" to
   // whatever images they don't want to have pinned.
   if(!$(this).hasClass('nopin')){
            --^^^^^^^^^^^^^^^^^^--