jQuery манипулирование / each () - почему это не нацелено на отдельные элементы?

Question

У меня есть несколько изображений (сгенерированных в другом месте), которые я хочу манипулировать и улучшать с помощью jQuery.

У меня есть скрипт, выполняющий все, что мне нужно, кроме отдельных манипуляций; Мой скрипт выполняется на всех элементах, а не индивидуально. Что мне не хватает?

Вот что у меня есть:

Несколько изображений в этом формате:

<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

С помощью $('p img') вы выбираете все img в каждом p на странице. Вы хотите сосредоточиться на этом p внутри цикла each().

Изменить это:

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

к этому:

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

Answer 2

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

        //grab img's SRC
        var imgLinkMerge = $(this).find('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 3

Это изменение

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

до

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

это выберет img, используя текущий контекст, то есть текущий p