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.
如果在HTML页面中有5个图像。我想通过它的src属性值搜索2个图像,并在图像标签中添加一个新的属性。
The restriction is I can't search img
tag by any id
or class
attribute value, I have only src
value. In below code,
限制是我不能用任何id或类属性值搜索img标签,我只有src值。在以下代码中,
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".
我想搜索具有src值的img标签,比如img_src_1和img_src_2,我想在img标签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应该是这样的
<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.
非常感谢您的帮助,谢谢。
8 个解决方案
#1
2
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");
}
});
#2
6
You can achieve this by using jQuery's attribute selector, then using attr()
to add the nopin
attribute.
您可以通过使用jQuery的属性选择器来实现这一点,然后使用attr()来添加nopin属性。
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.
但是值得注意的是,nopin是一个非标准属性,它可能会导致HTML有效性的一些问题。如果可能的话,我建议使用data-nopin。
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">
#3
2
Use this selector img[src="'+img_src_1+'"]
not find
使用这个选择器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.
不需要使用完整的URL,只需编写图像名称并通过这个选择器img[src*="'+img_name+']找到它,然后使用数据作为属性。
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">
#4
1
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
作为参考,jQuery属性选择器
#5
1
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.
对图像进行循环,并使用attr查找图像的src。检查图像的src,如果条件匹配,则使用attr()函数向元素添加新属性。
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">
#6
1
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" );
});
#7
1
Try this - Used Javascript for internal code. Actually you don't need Jquery for that too (unnecessary increasing the bandwidth overhead).
尝试使用Javascript进行内部代码。实际上,您也不需要Jquery(不必要的增加带宽开销)。
<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>
#8
1
You could use vanilla-JS
您可以使用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演示
(In the example the images with the nopin
attribute have been decorated with an outline
in CSS)
(在本例中,带有nopin属性的图像已经用CSS中的大纲进行了修饰)
#1
2
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");
}
});
#2
6
You can achieve this by using jQuery's attribute selector, then using attr()
to add the nopin
attribute.
您可以通过使用jQuery的属性选择器来实现这一点,然后使用attr()来添加nopin属性。
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.
但是值得注意的是,nopin是一个非标准属性,它可能会导致HTML有效性的一些问题。如果可能的话,我建议使用data-nopin。
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">
#3
2
Use this selector img[src="'+img_src_1+'"]
not find
使用这个选择器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.
不需要使用完整的URL,只需编写图像名称并通过这个选择器img[src*="'+img_name+']找到它,然后使用数据作为属性。
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">
#4
1
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
作为参考,jQuery属性选择器
#5
1
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.
对图像进行循环,并使用attr查找图像的src。检查图像的src,如果条件匹配,则使用attr()函数向元素添加新属性。
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">
#6
1
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" );
});
#7
1
Try this - Used Javascript for internal code. Actually you don't need Jquery for that too (unnecessary increasing the bandwidth overhead).
尝试使用Javascript进行内部代码。实际上,您也不需要Jquery(不必要的增加带宽开销)。
<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>
#8
1
You could use vanilla-JS
您可以使用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演示
(In the example the images with the nopin
attribute have been decorated with an outline
in CSS)
(在本例中,带有nopin属性的图像已经用CSS中的大纲进行了修饰)