Question

I have some images (generated elsewhere), that I want to manipulate and enhance using jQuery.

I have a script executing everything I need, except for individual manipulation; my script executes on all elements, not individually. What am I missing?

This is what I have:

Multiple images in this format:

<p>
  <a href="">
    <img src="" />
  </a>
</p>
<p>
  <a href="">
    <img src="" />
  </a>
</p>

jQuery:

  $('p').each(function(){

        //grab img's SRC
        var imgLinkMerge = $('p img').attr('src');

          //find the a tag, change HREF for imgLinkMerge value
          $(this).find('a').attr('href', imgLinkMerge).each(function(){
            //set css BG IMG
            $(this).css('background-image', 'url(' + imgLinkMerge + ')');
          });

        });

Answer 1

With $('p img') you are selecting all img within every p on the page. You want to focus on this p inside the each() loop.

Change this:

var imgLinkMerge = $('p img').attr('src');

to this:

var imgLinkMerge = $(this).find('img').attr('src');