<img>タグのsrc = ""が同じかどうかを確認する方法はありますか？

-2

私は<img>または<a>タグが同じsrc（id）を持っているかどうかを確認したいと同じsrcまたはid で1をクリックしてくださいここでのコード例だより：<img>タグのsrc = ""が同じかどうかを確認する方法はありますか？

<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が見つかりました：あなたはすべてのimgの要素を見つけるためにjqueryのを使用することができます

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'); 
})();

出典

2017-02-14 ClearSky

ただし、重複を見つけたらどうしますか？ – NewToJS

jQueryを使用してすべてのimg要素を取得し、src属性を取得して反復処理することができます。 dupを検出するにはSetを使用します。 –

同じ 'id'値を持つ2つの要素があるのはなぜですか？それは非論理的なことは言うまでもなく、無効なHTMLです。 – nnnnnn

を：

var list = $("IMG");

あなたは、その後でのみイメージを検索するためのセレクタを絞り込むことができます一定値のSRC：

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

そして、あなたは数を取ることができます：

count> 1の場合、重複があります。

出典

2017-02-14 01:14:35

しかしこれは、テストする特定の 'src'値を既に知っていることを前提としています。前もって値を知らずに、重複した 'src'要素を持つimg要素をどのように見つけることができますか？ – nnnnnn

[ページ上のすべてのSRC値の配列を取得できます]（http://stackoverflow.com/questions/18101673/jquery-get-all-src-of-images-in-div-and-put-into-フィールド）を作成し、それをループで使用します。 –

まず、我々はチェックして、セレクタを宣言したい画像のurl持っている：1をクリックし

var num = img.length;

：同じURLを持つimgの数をカウントする

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

を（最初のもの）：

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

これが役に立ちます。 :)

出典

2017-02-14 01:25:18

CSS attribute selectorsを使用すると、srcと一致するすべての画像を選択し、返されたコレクションのlengthプロパティを確認することが最も信頼できる方法です。 jQueryで行うか、CSSセレクタを入力として受け入れるdocument.querySelectorAll()を使うこともできます。

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 
}

出典

2017-02-14 01:27:11 ppajer

なぜ 'src ='の代わりに 'src^='を使っていますか？これは、一方が他方のプレフィックスである場合、それらを重複として扱います。 'src = foo'と' src = foobar'です。確かに、画像URLには通常別の接尾辞があり、接尾辞の付いた名前で始まる別の画像はないため、これは考えにくいペアです。 – Barmar

あなたは正しいです。それは、正確ではないURLを許可するために '* ='であることを意図していましたが、これを書き留めたので、 '^ ='より意味がありません。私の答えを単に '='を使うように変更する。 – ppajer

私は、このページの助けを借りて、この小さな例をした：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>

出典

2017-02-14 02:05:07 Cooper

<img>タグのsrc = ""が同じかどうかを確認する方法はありますか？

答えて

関連する問題