データ属性に基づいて重複したアイテムをすべて表示し、最新のバージョンをハイライト表示

Question

私はjqueryのエキスパートではありません。

私はHTMLのフィギュアマークアップを使用してギャラリーグリッド形式で表示された23枚の画像を持っている私のデモフィドルこのフィドルでhttps://jsfiddle.net/joshmoto/jre166d1/

参照してください。

この画像の配列には、2つの重複画像があります。画像はIMG 019とIMG 013です。私はまた、それらをテスト参照用の重複データ属性でマークしました。クリックされたとき、buttonを使用して

、私はdata-titleと呼ばれるデータの属性に基づいてFIGURE項目に.duplicateというクラスを追加します。

data-titleの値は重複があるかどうかを確認するための鍵です。

このチェックが完了したら、重複結果の最新のアップロード画像に.latest-duplicateというクラスを追加します。 data-timeという名前のデータ属性が標準PHPの日付文字列2016-12-19 13:09:37であり、最新の画像を見つけるための鍵となります。

だから、アイデアが重複しているすべての画像が赤色の背景を持っていますが、それらの結果に、最新の重複は緑色の背景を持っていることです。これは、ユーザーがどの複製が最新バージョンであるかを知ることができるようにするためです。

驚くべき感謝の言葉を誰かが持っているなら、私はどこから始めるべきか分かりません。

https://jsfiddle.net/joshmoto/jre166d1/

// reveal duplicated images and highlight latest version 
$('#reveal-duplicates').on('click', function() { 

    // help 
    ... 

}); 

Answer 1

$('#reveal-duplicates').on('click', function() { 

    // do stuff 
$('figure').each(function(){ 
var $this = $(this), 
    title = $this.attr('data-title'); 

    var $foundFIgure = $('figure[data-title="'+title+'"]'); 
    if($foundFIgure.length > 1){ 
     $foundFIgure.addClass('duplicate'); 
    } 
}) 

}); 

https://jsfiddle.net/jre166d1/4/