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 = ".jpg";
var img_src_2 = ".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=".jpg" width="200px" height="200px">
<p>My Image 2</p>
<img src=".jpg" width="200px" height="200px">
<p>My Image 3</p>
<img src=".jpg" width="200px" height="200px">
<p>My Image 4</p>
<img src=".jpg" width="200px" height="200px">
<p>My Image 5</p>
<img src=".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=".jpg" width="200px" height="200px">
<p>My Image 2</p>
<img src=".jpg" width="200px" height="200px">
<p>My Image 3</p>
<img nopin="nopin" src=".jpg" width="200px" height="200px">
<p>My Image 4</p>
<img src=".jpg" width="200px" height="200px">
<p>My Image 5</p>
<img nopin="nopin" src=".jpg" width="200px" height="200px">
</body>
</html>
Any help really appreciated, thanks in advance.
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.
Share Improve this question edited May 15, 2018 at 9:39 Frank asked May 15, 2018 at 9:21 FrankFrank 2,3577 gold badges43 silver badges68 bronze badges 1- I am really thankful to all you for quick responses. I got the exact solution to my problem and you provided it fastly. – Frank Commented May 15, 2018 at 9:42
8 Answers
Reset to default 6You 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">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");
}
});
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">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
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">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" );
});
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>
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)