find img tag by src value and add new attribute in img tag

  • A+
Category:Languages

If I have 5 images into the HTML page. I want to search 2 images by it's src attribute value and add a new attribute to the image tag.

The restriction is I can't search img tag by any id or class attribute value, I have only src value. In below code,

I want to search 2 img tag which has src value like img_src_1 and img_src_2 and want to add a new attribute in both img tag nopin="nopin".

<html>     <head>         <script>         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 & 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          });         </script>     </head>     <body>         <h1>My Gallery Page</h1>         <p>My Image 1</p>         <img src="https://example.com/image-1.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">          <p>My Image 2</p>         <img src="https://example.com/image-2.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">          <p>My Image 3</p>         <img src="https://example.com/image-3.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">          <p>My Image 4</p>         <img src="https://example.com/image-4.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">          <p>My Image 5</p>         <img src="https://example.com/image-5.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">     </body> </html> 

Resultant HTML should be like this after page loads

<html>     <body>         <h1>My Gallery Page</h1>         <p>My Image 1</p>         <img src="https://example.com/image-1.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">          <p>My Image 2</p>         <img src="https://example.com/image-2.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">          <p>My Image 3</p>         <img nopin="nopin" src="https://example.com/image-3.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">          <p>My Image 4</p>         <img src="https://example.com/image-4.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">          <p>My Image 5</p>         <img nopin="nopin" src="https://example.com/image-5.jpg" alt="find img tag by src value and add new attribute in img tag" width="200px" height="200px">     </body> </html> 

Any help really appreciated, thanks in advance.


please try below simple and easy solution:

        var img_src_1 = "https://example.com/image-3.jpg";         var img_src_2 = "https://example.com/image-5.jpg";         jQuery("img").each(function() {         if(jQuery(this).attr("src") == img_src_1 || jQuery(this).attr("src") == img_src_2)           {             jQuery(this).attr("nopin", "nopin");           }        }); 

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: