title: find img tag by src value and add new attribute in img tag
body: <p>If I have 5 images into the HTML page. I want to search 2 images by it's <code>src</code> attribute value and add a new attribute to the image tag. </p>
  
  <p><strong>The restriction</strong> is I can't search <code>img</code> tag by any <code>id</code> or <code>class</code> attribute value, I have only <code>src</code> value. In below code, </p>
  
  <p>I want to search 2 img tag which has src value like <strong>img_src_1</strong> and <strong>img_src_2</strong> and want to add a new attribute in both <code>img</code> tag <strong>nopin="nopin"</strong>.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script&gt;
          jQuery(document).ready(function(){
              // find img tag by src value and add new attribute nopin="nopin" into this img tag
              var img_src_1 = "https://example.com/image-3.jpg";
              var img_src_2 = "https://example.com/image-5.jpg";
  
              // find images with src url value is img_src_1 &amp; img_src_2
              var result1 = jQuery('img').find('src', img_src_1);
              var result2 = jQuery('img').find('src', img_src_2);
  
              // add new attribute nopin="nopin" in both img tag
  
          });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;My Gallery Page&lt;/h1&gt;
          &lt;p&gt;My Image 1&lt;/p&gt;
          &lt;img src="https://example.com/image-1.jpg" width="200px" height="200px"&gt;
  
          &lt;p&gt;My Image 2&lt;/p&gt;
          &lt;img src="https://example.com/image-2.jpg" width="200px" height="200px"&gt;
  
          &lt;p&gt;My Image 3&lt;/p&gt;
          &lt;img src="https://example.com/image-3.jpg" width="200px" height="200px"&gt;
  
          &lt;p&gt;My Image 4&lt;/p&gt;
          &lt;img src="https://example.com/image-4.jpg" width="200px" height="200px"&gt;
  
          &lt;p&gt;My Image 5&lt;/p&gt;
          &lt;img src="https://example.com/image-5.jpg" width="200px" height="200px"&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Resultant HTML</strong> should be like this after page loads</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;h1&gt;My Gallery Page&lt;/h1&gt;
          &lt;p&gt;My Image 1&lt;/p&gt;
          &lt;img src="https://example.com/image-1.jpg" width="200px" height="200px"&gt;
  
          &lt;p&gt;My Image 2&lt;/p&gt;
          &lt;img src="https://example.com/image-2.jpg" width="200px" height="200px"&gt;
  
          &lt;p&gt;My Image 3&lt;/p&gt;
          &lt;img nopin="nopin" src="https://example.com/image-3.jpg" width="200px" height="200px"&gt;
  
          &lt;p&gt;My Image 4&lt;/p&gt;
          &lt;img src="https://example.com/image-4.jpg" width="200px" height="200px"&gt;
  
          &lt;p&gt;My Image 5&lt;/p&gt;
          &lt;img nopin="nopin" src="https://example.com/image-5.jpg" width="200px" height="200px"&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help really appreciated, thanks in advance.</p>