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

Question

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

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

小提琴

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

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

小提琴

另一种方法需要更少的迭代并创建一个带有要隐藏元素的索引的选择器。

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

小提琴

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

演示在这里

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 以避免子匹配