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>

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

cat 1
cat 2
cat 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/

编辑：已更改：包含赞成.filter以避免子匹配

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

3 个答案:

演示here