CODEWITHSUNDEEP
jquery
thindery
thindery

Reputation: 1194

instert div before a element tag of an image

I have the following code that will look in a div and find all images. it then wraps the image in a new div, creates a second div that houses a button, and this is used to do an image hover effect with another script

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

the before jQuery html looks like this:

<a href="http://originalimagelink.html"><img src="originalimage.jpg"></a>

but after the script, the jquery is wrapping only the img, like this:

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

I need it to wrap the img and a elements. so the end result is something like this:

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

what am i doing wrong?

Upvotes: 3

Views: 198

Answers (3)

Alexander
Alexander

Reputation: 23537

  1. You may want to start in the image's parent element.

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

  2. You can make use of the .hasClass() 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')){
         --^^^^^^^^^^^^^^^^^^--

Upvotes: 4

Warlock
Warlock

Reputation: 7471

Try this code:

$(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>');
  })
});​

Upvotes: 2

Viktor S.
Viktor S.

Reputation: 12815

Try this code:

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

  }
  });
});
​

Demo: http://jsfiddle.net/gfE7m/2/

Upvotes: 2

Related Questions