jquery - jqueryで繰り返し値を特定する

Question

このようなリストがあるとします

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
</ul>

jQuery を使用して、値が繰り返されるタイミングを特定するにはどうすればよいですか。私の意図は、繰り返しの値に別のスタイルを与えることです。

Answer 1

すべての<li>オブジェクトを循環し、それらのテキストを取得して、インデックスとして使用するオブジェクトに収集できます (効率化のため)。完了したら、特定のテキストを持つ複数の要素を持つアイテムを確認し、それらに特別なクラスを追加します。このソリューションでは、効率上の理由から、オブジェクトを使用してインデックスを作成します。コードは次のように機能します。

HTML:

<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
</ul>​

コメント付きの Javascript:

(function() {
    var index = {};
    $("#list li").each(function() {
        var text = $(this).text();
        // if this text not in the index yet, create an array for it
        if (!(text in index)) {
            index[text] = [];
        }
        // add this item to the array
        index[text].push(this);
    });
    // cycle through the index and find each item that has more than one DOM element
    $.each(index, function() {
        // "this" will be an array of DOM nodes
        if (this.length > 1) {
            $(this.slice(1)).addClass("duplicates");
        }
    });
})();​

動作デモ: http://jsfiddle.net/jfriend00/zDhjD/

Answer 2

$("ul li").each(function(){
   var val = $(this).text();  
   $("ul li").not(this).each(function(){
    if($(this).text() == val){
     $(this).addClass("mystyle");
    }
   });
});

http://jsfiddle.net/tscRG/

Answer 3

これを試して：

​$('ul > li')​.each(function(){
    var current = this;
    $('ul').find('li:contains(' + $(this).html() + ')').each(function(){
        if(current != this) {
            $(this).css('color', 'red');
        }
    });
});​

jsFiddle のデモ