有没有办法检查某些 <img> 标签是否具有相同的 src=""？答案

【问题标题】：Is there way to check if some <img> tag have same src=""?有没有办法检查某些 <img> 标签是否具有相同的 src=""？
【发布时间】：2017-02-14 01:09:11
【问题描述】：

我想检查<img> 或<a> 标签是否具有相同的src(id)，然后单击具有相同src 或id 的标签下面是示例代码：

<span>
    <a id="101" href="#">
        <img  src="101.png"></a>
    <a id="3" href="#">
        <img  src="3.png"></a>
    <a id="59" href="#">
        <img  src="59.png"></a>
    <a id="3" href="#">
        <img  src="3.png"></a>
</span>

有没有办法用 jquery 或 javascript 来做呢？

我找到了解决方案，tnx 为您解答：

    javascript:(function () {
  var ids = {};
  var found = false;
  $('[id]').each(function() {
    if (this.id && ids[this.id]) {
      found = true;
      console.warn('Duplicate ID #'+this.id);
      dupid=this.id;
      $('#'+dupid).click();
    }
    ids[this.id] = 1;
  });
  if (!found) console.log('No duplicate IDs found');
})();

【问题讨论】：

但是一旦找到重复项，您想做什么？
您可以让 jQuery 为您提供所有 img 元素，然后遍历它们以获取它们的 src 属性。使用 Set 检测重复。
为什么会有两个具有相同id 值的元素？那是无效的 HTML，更不用说不合逻辑了。
可以说这是我想要自动点击的某种验证码
那么，您想击败验证码，并希望我们帮助您做到这一点？

标签： javascript jquery html

【解决方案1】：

您可以使用 jquery 查找所有 img 元素：

var list = $("IMG");

然后您可以优化选择器以仅查找具有特定值的 SRC 的图像：

var list = $("IMG[SRC='image1']");

然后你可以数一数：

var count = $("IMG[SRC='image1']").length;

如果count > 1，那么你有一个重复。

【讨论】：

但这假设您已经知道要测试的特定 src 值。在事先不知道值的情况下，如何找到具有重复 src 的 img 元素？
您可以get an array of all SRC values on the page 并在循环中使用它。

【解决方案2】：

我在这个页面的帮助下做了这个小例子：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_images3

这里是源码，你可以去那里测试一下。这不是完全正确的答案，但您只需做一些额外的工作，您就可以找出其余的。它为您提供了 document.images 数组中重复的原始索引。当然，您不需要输出原始数组或排序后的数组，但我只是希望能够看到我在做什么。最终索引使您可以直接访问重复的图像。

 <body>

  <img src="http://www.w3schools.com/jsref/klematis.jpg" alt="flower" width="150" height="113">
  <img src="http://www.w3schools.com/jsref/klematis.jpg" alt="flower" width="150" height="113">
  <img src="http://www.w3schools.com/jsref/klematis2.jpg" alt="flower" width="152" height="128">
  <img src="http://www.w3schools.com/jsref/smiley.gif" alt="Smiley face" width="42" height="42">
  <img src="http://www.w3schools.com/jsref/klematis.jpg" alt="flower" width="150" height="113">

  <p>Click the button to display the URL of the first image (index 0) in the document.</p>

  <button onclick="myFunction()">Try it</button>

  <p id="demo"></p>
  <p id="result"></p>
  <p id="answer"></p>

  <script>
    function myFunction() {
      line = '';
      var duplicates = false;
      var imageA = [];
      for (var i = 0; i < document.images.length; i++) {
        imageA[i] = [];
        document.getElementById("demo").innerHTML += '<br />' + document.images[i].src;
        imageA[i].push(document.images[i].src);
        imageA[i].push(i);
      }
      imageA.sort();
      var firsttime = true;
      for (var i = 0; i < document.images.length; i++) {
        var n = i + 1;
        document.getElementById("result").innerHTML += '<br />' + n + ' - ' + imageA[i];
        if (i > 0) {
          if (imageA[i][0] == imageA[i - 1][0]) {
            if (!firsttime) line += ', ';
            duplicates = true;
            var num = imageA[i][1];
            line += num;
            firsttime = false;
          }
        }
      }
      if (duplicates) {
        document.getElementById("answer").innerHTML = 'The follow indices of the original document.images array are duplicates: ';
        document.getElementById("answer").innerHTML += line + '.';
      }
    }
    </script>

</body>

【讨论】：

【解决方案3】：

首先我们有我们要检查的图像的url，并声明选择器：

var url = (an image url);
var img = $('img[src='+url+']');

统计具有相同 url 的img 的数量：

var num = img.length;

点击其中一个（第一个）：

if (num > 1) img.first().click();

希望这会有所帮助。 :)

【讨论】：

【解决方案4】：

最可靠的方法是使用CSS attribute selectors 选择与src 匹配的所有图像，然后检查返回集合的length 属性。您可以在 jQuery 中执行此操作，也可以使用document.querySelectorAll()，它也接受 CSS 选择器作为输入。

function hasDuplicate(src) {
    var images = document.querySelectorAll('img[src="'+src+'"]');

    return images.length > 1;
}

// OR in jQuery

function hasDuplicate(src) {
    return $('img[src="'+src+'"]').length > 1
}

【讨论】：

你为什么用src^=而不是src=？如果一个是另一个的前缀，这会将它们视为重复项，例如src=foo 和 src=foobar。诚然，这不太可能配对，因为图像 URL 通常具有不同的后缀，并且您不会有另一个以后缀名称开头的图像。
你是对的。本来应该是*= 以允许不准确的URL，但现在我已经把它写下来了，它并不比^= 更有意义。将我的答案更改为简单地使用=。