通过 src 值查找 img 标签并在 img 标签中添加新属性答案

【问题标题】：find img tag by src value and add new attribute in img tag通过 src 值查找 img 标签并在 img 标签中添加新属性
【发布时间】：2018-05-15 18:28:57
【问题描述】：

如果我在 HTML 页面中有 5 张图片。我想通过 src 属性值搜索 2 张图像，并向图像标签添加一个新属性。

限制是我不能用任何id或class属性值搜索img标签，我只有src值。在下面的代码中，

我想搜索 2 个具有 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>

页面加载后生成的 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>

非常感谢任何帮助，在此先感谢。

【问题讨论】：

非常感谢大家的快速回复。我得到了我的问题的确切解决方案，你很快就提供了。

标签： javascript jquery html image

【解决方案1】：

您可以通过使用 jQuery 的属性选择器来实现这一点，然后使用attr() 添加nopin 属性。

值得注意的是，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">

【讨论】：

【解决方案2】：

请尝试以下简单易行的解决方案：

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

【讨论】：

我至少建议在this.src 中更改jQuery(this).attr("src") 并进行数组查找
@fcalderan 正在谈论这个if(jQuery(this.src).attr("src") == img_src)?

【解决方案3】：

使用此选择器img[src="'+img_src_1+'"] 而不是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">

推荐版本：

不需要使用完整的URL，只需写图像名称并通过此选择器img[src*="'+img_name+'"]找到它，然后使用data作为属性。

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】：

尝试关注

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

供参考，jQuery Attribute Selector

【讨论】：

【解决方案5】：

循环图像并找到带有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】：

以下代码可以帮助您。

 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】：

试试这个 - 内部代码使用 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】：

你可以使用 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

（在示例中，具有nopin 属性的图像在 CSS 中使用outline 进行了修饰）

【讨论】：

对于未来的读者：您会欣赏我的回答中缺少 jQuery。我确定。我知道。当我在任何地方看到 jQuery 用于任何任务时，我都能感受到每个开发人员追求热情工艺的痛苦。我能听到你的声音，我明白了。我拥抱你们。