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

65
May 15, 2018, at 6:50 PM

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" width="200px" height="200px">
        <p>My Image 2</p>
        <img src="https://example.com/image-2.jpg" width="200px" height="200px">
        <p>My Image 3</p>
        <img src="https://example.com/image-3.jpg" width="200px" height="200px">
        <p>My Image 4</p>
        <img src="https://example.com/image-4.jpg" width="200px" height="200px">
        <p>My Image 5</p>
        <img src="https://example.com/image-5.jpg" 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" width="200px" height="200px">
        <p>My Image 2</p>
        <img src="https://example.com/image-2.jpg" width="200px" height="200px">
        <p>My Image 3</p>
        <img nopin="nopin" src="https://example.com/image-3.jpg" width="200px" height="200px">
        <p>My Image 4</p>
        <img src="https://example.com/image-4.jpg" width="200px" height="200px">
        <p>My Image 5</p>
        <img nopin="nopin" src="https://example.com/image-5.jpg" width="200px" height="200px">
    </body>
</html>

Any help really appreciated, thanks in advance.

Answer 1

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");
          }
       });
Answer 2

You can achieve this by using jQuery's attribute selector, then using attr() to add the nopin attribute.

It's worth noting however that nopin is a non-standard attribute which may cause some issues with HTML validity. I'd suggest using data-nopin instead, if possible.

jQuery(function($) { 
  var img_src_1 = "https://example.com/image-3.jpg"; 
  var img_src_2 = "https://example.com/image-5.jpg"; 
 
  $(`img[src="${img_src_1}"], img[src="${img_src_2}"]`).attr('nopin', 'nopin'); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<h1>My Gallery Page</h1> 
<p>My Image 1</p> 
<img src="https://example.com/image-1.jpg" width="200px" height="200px"> 
 
<p>My Image 2</p> 
<img src="https://example.com/image-2.jpg" width="200px" height="200px"> 
 
<p>My Image 3</p> 
<img src="https://example.com/image-3.jpg" width="200px" height="200px"> 
 
<p>My Image 4</p> 
<img src="https://example.com/image-4.jpg" width="200px" height="200px"> 
 
<p>My Image 5</p> 
<img src="https://example.com/image-5.jpg" width="200px" height="200px">

Answer 3

Use this selector img[src="'+img_src_1+'"] not find

$(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"; 
 
  // I want to find images with src url value is img_src_1 & img_src_2 and add new attribute nopin="nopin" 
  var result1 = $('img[src="'+img_src_1+'"]'); 
  var result2 = $('img[src="'+img_src_2+'"]'); 
  result1.attr('nopin','nopin'); 
  result2.attr('nopin','nopin'); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>My Gallery Page</h1> 
<p>My Image 1</p> 
<img src="https://example.com/image-1.jpg" width="200px" height="200px"> 
 
<p>My Image 2</p> 
<img src="https://example.com/image-2.jpg" width="200px" height="200px"> 
 
<p>My Image 3</p> 
<img src="https://example.com/image-3.jpg" width="200px" height="200px"> 
 
<p>My Image 4</p> 
<img src="https://example.com/image-4.jpg" width="200px" height="200px"> 
 
<p>My Image 5</p> 
<img src="https://example.com/image-5.jpg" width="200px" height="200px">

Recommended version:

No need to use full URL, just write image name and find it by this selector img[src*="'+img_name+'"] then, use data for attribute.

var img_src_1 = "image-3.jpg"; 
var img_src_2 = "image-5.jpg"; 
 
$('img[src*="' + img_src_1 + '"], img[src*="' + img_src_2 + '"]').attr('data-nopin', 'nopin');
img[data-nopin] { 
  border: 1px solid red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>My Gallery Page</h1> 
<p>My Image 1</p> 
<img src="https://example.com/image-1.jpg" width="200px" height="200px"> 
 
<p>My Image 2</p> 
<img src="https://example.com/image-2.jpg" width="200px" height="200px"> 
 
<p>My Image 3</p> 
<img src="https://example.com/image-3.jpg" width="200px" height="200px"> 
 
<p>My Image 4</p> 
<img src="https://example.com/image-4.jpg" width="200px" height="200px"> 
 
<p>My Image 5</p> 
<img src="https://example.com/image-5.jpg" width="200px" height="200px">

Answer 4

Try following

var result1 = $('img[src="'+ img_src_1 + '"]');
var result2 = $('img[src="'+ img_src_2 + '"]');
result1.attr("nopin", "nopin");
result2.attr("nopin", "nopin");

For reference, jQuery Attribute Selector

Answer 5

Loop the image and find the src of image with attr. Check src of image and if the condition match add new attribute to element with attr() function.

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"; 
 
            // I want to find images with src url value is img_src_1 & img_src_2 and add new attribute nopin="nopin" 
            var result1 = jQuery('img').find('src', img_src_1); 
            var result2 = jQuery('img').find('src', img_src_2); 
            $('img').each(function(){ 
              if($(this).attr('src') == img_src_1 || $(this).attr('src') == img_src_2) { 
              $(this).attr('nopin', 'nopin'); 
               
              } 
            }); 
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>My Gallery Page</h1> 
        <p>My Image 1</p> 
        <img src="https://example.com/image-1.jpg" width="200px" height="200px"> 
 
        <p>My Image 2</p> 
        <img src="https://example.com/image-2.jpg" width="200px" height="200px"> 
 
        <p>My Image 3</p> 
        <img src="https://example.com/image-3.jpg" width="200px" height="200px"> 
 
        <p>My Image 4</p> 
        <img src="https://example.com/image-4.jpg" width="200px" height="200px"> 
 
        <p>My Image 5</p> 
        <img src="https://example.com/image-5.jpg" width="200px" height="200px">

Answer 6

Following code can help you.

 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";
            // I want to find images with src url value is img_src_1 & img_src_2 and add new attribute nopin="nopin"
            jQuery('img[src="' + img_src_1 + '"]').attr("nopin" ,"nopin" );
            jQuery('img[src="' + img_src_2 + '"]').attr("nopin" ,"nopin" );
        });
Answer 7

Try this - Used Javascript for internal code. Actually you don't need Jquery for that too (unnecessary increasing the bandwidth overhead).

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
    <h1>My Gallery Page</h1>
    <p>My Image 1</p>
    <img src="https://www.drupal.org/files/issues/sample_7.png" width="200px" height="200px">
    <p>My Image 2</p>
    <img src="https://software-carpentry.org/files/2014/01/novice-sample.png" width="200px" height="200px">
    <p>My Image 3</p>
    <img src="https://software-carpentry.org/files/2014/01/novice-sample.png" width="200px" height="200px">
    <p>My Image 4</p>
    <img src="https://bellard.org/bpg/2.png" width="200px" height="200px">
    <p>My Image 5</p>
    <img src="https://bellard.org/bpg/2.png" width="200px" height="200px">
</body>
<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://software-carpentry.org/files/2014/01/novice-sample.png";
        var img_src_2 = "https://www.drupal.org/files/issues/sample_7.png";
        // I want to find images with src url value is img_src_1 & img_src_2 and add new attribute nopin="nopin"
        var result = document.getElementsByTagName('img');
        for(var i=0;i<result.length;i++){
            if(result[i].src==img_src_1 || result[i].src==img_src_2){
                result[i].setAttribute("nopin", "nopin");
            }
        }
    });
    </script>

Answer 8

You could use vanilla-JS

/* retrieve images ($= means "attribute ending with") 
 * Note how easy is to look for several images (no need to write
 * ugly long and error-prone comparisons with ||), you just select them 
 * as you would do it in CSS 
 */ 
var imagesNoPin = document.querySelectorAll(
                 '[src $= "-3.jpg"], 
                  [src $= "-5.jpg"]');
/* set the attribute for each image. Note that you don't need to loop
 * over ALL images, as in other answers: you have already found them
 * before via the js-native querySelectorAll() method
 */
[].forEach.call(imagesNoPin, function(img) {
   img.setAttribute('nopin', 'nopin'); // with an attribute
   // img.dataset.nopin = "nopin"      // with a data-nopin attribute (suggested)
});
/* same result with spread [...] operator */
// [...imagesNoPin].map((img) => img.setAttribute('nopin', 'nopin'));

Codepen demo

(In the example the images with the nopin attribute have been decorated with an outline in CSS)

READ ALSO
Issue in reading resource file in Js file when using BundleTable.EnableOptimizations in MVC

Issue in reading resource file in Js file when using BundleTable.EnableOptimizations in MVC

I am using 'jQuery Impromptu' for prompt a user for input, below is the code

65
how to get request parameter of patch request

how to get request parameter of patch request

I'm trying to make an AJAX request by PATCH method, but I get error message "Required String parameter 'paymentPassword' is not present"How to bind the paymentPassword parameter? If I change HTTP request method to POST and @PatchMapping to @PostMapping,...

72
SingalR Error during negotiation request

SingalR Error during negotiation request

I've got a project with SignalR and AspNetI'm trying to connect my client (its a cors) and the first request returns 200 code but I'm getting this error in my client side:

36