Menu
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.
270
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");
}
});
answered Dec 06 '22 12:12
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">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
