仅显示来自具有相同类名的多个 div 标签的不同值的最佳方法

Question

如何仅显示具有相同类名的多个 div 标签中的 distinct 值

<div class="categories">cat 1</div>
<div class="categories">cat 1</div>
<div class="categories">cat 2</div>
<div class="categories">cat 2</div>
<div class="categories">cat 2</div>
<div class="categories">cat 3</div>
<div class="categories">cat 3</div>

我想只显示不同的值并隐藏其余的值

• 猫 1
• 猫 2
• 猫 3

Answer 1

大概是这样的吧？

  $('.categories').filter(function(){ //use filter on all .categories
       var txt = $.trim(this.innerHTML); //Get the text of current
       return ($(this).nextAll().filter(function () { //filter all of the proceeding siblings which has the same text
            return $.trim(this.innerHTML) === txt
        }).length); //send true or false (in fact truthy or falsy to ask to hide the current element in question)
   }).hide(); 

Fiddle

另一个衍生品，这将隐藏第一个衍生品，而前一个衍生品将隐藏最后一个。

$(function () {
    $('.categories').each(function(){
       var txt = $.trim(this.innerHTML);
       $(this).nextAll(':visible').filter(function () {
            return $.trim(this.innerHTML) === txt
        }).hide();
    });
});

Fiddle

另一种方法，它需要更少的迭代并创建一个选择器，其中包含要隐藏的元素的索引。

$(function () {
    var arrText = [];
    $(($('.categories').map(function(){
       var txt = $.trim(this.innerHTML);
        if(arrText.indexOf(txt) == -1) 
            arrText.push(txt);
        else 
           return('.categories:eq(' + $('.categories').index(this) + ')'); //create the selector with eq
    }).get().join(','))).hide();
});

Fiddle

Answer 2

你可以用这个：

$(function () {
    var text = []
    $('.categories').each(function () {
        if ($.inArray($(this).text(), text)<0) {
            text.push($(this).text())
        }
    });
    // you can use now the variable "text"
    console.log(text);
});

演示here

Answer 3

$('.categories').each(function() {
    var textContent = $(this).text();
    if ($('.categories:visible').not(this).filter(function() {
        return $(this).text() == textContent;
    }).length) {
        $(this).hide();
    }
});

小提琴：http://jsfiddle.net/cYjyn/1/

编辑：更改 :contains 支持 .filter 以避免子匹配