3

私はdivを調べてすべての画像を見つける次のコードを持っています。次に、画像を新しいdivでラップし、ボタンを格納する2番目の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>');           
    }
});

beforejQueryhtmlは次のようになります。

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

私は何が間違っているのですか？

4

3 に答える 3

4

  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')){
         --^^^^^^^^^^^^^^^^^^--
于 2012-11-29T18:07:46.397 に答える
2

このコードを試してください：

$(document).ready(function(){
  // Get the images from whatever element contains them.    
  var postImgs = $('#primary img');
  postImgs.each(function() {

  // 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')) {      

    // Wrap the image in a container.
    $(this).parent().wrap('<div class="showPin"/>');         

    // Add the pinterest button and link into the container.
    $(this).parent().parent().prepend('<div class ="pinIt"><a href="buttonlink.html" target="_blank"><img src="button.jpg" /></a></div>');           

  }
  });
});
​

デモ： http： //jsfiddle.net/gfE7m/2/

于 2012-11-29T18:09:00.217 に答える
2

このコードを試してください：

$(function(){
    $('img').not('.nopin').each(function(){
        $(this).closest('a').wrap('<div class="showPin"/>').before('<div class="pinIt"><a href="buttonlink.html"><img src="button.jpg"></a></div>');
  })
});​
于 2012-11-29T18:16:39.863 に答える