在列表项中查找重复的类 - .filter（）显示它们，隐藏其余的

Question

我正在编写一个代码，该代码将在无序列表中显示具有重复<li class="duplicate duplicate">的列表项并隐藏所有其余项。基本上是一个过滤器。元素是由我的代码的其他部分生成的，在这个例子中是无关紧要的，我不知道如何实现这一点。

第一个场景

显示所有重复项（仅重复多次的类）

第二种情况

显示给定类的所有重复项（也可以包含其他类：如红蓝红）

以下是一个示例：http://jsfiddle.net/xpvt214o/233350/这仅包含过滤特定值

＆＃13;

＆＃13;

var show_red = $("#show_red");
var duplicates = $("#duplicates");
var reset = $("#reset");

show_red.on("click", function(){
  
 var rows = $(".myList").find(".list_entry");
 $(".list_entry").hide().filter(".red").show();
            
});

reset.on("click", function(){
  
 var rows = $(".myList").find(".list_entry");
 $(".list_entry").show();
            
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="duplicates">Display Duplicates</button>
<button id="show_red">Show Only Red</button>
<button id="reset">Reset</button>

</button>

<ul class="myList">
<li class="list_entry  red red blue 1">Element1</li>
<li class="list_entry  red blue blue 2">Element2</li>
<li class="list_entry  pink 3">Element3</li>
<li class="list_entry  orange orange 4">Element4</li>
<li class="list_entry  black white 5">Element5</li>
<li class="list_entry  white white 6">Element6</li>
<li class="list_entry  black orange 7">Element7</li>
<li class="list_entry  test 8">Element8</li>
<li class="list_entry  something something 9">Element9</li>
<li class="list_entry  single 10">Element10</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

var $rows = $(".myList").find(".list_entry");

$("#show_red").on("click", function() {
  $rows.hide().filter(".red").show();
});

$("#reset").on("click", function() {
  $rows.show();
});

function uniqueValues ( array ) {
  return array.reduce(function(result, value){
    if (result.indexOf(value) < 0) result.push(value);
    
    return result;
  }, []);
}

$("#duplicates").on('click', function() {
  $rows.hide().filter(function(){
    //get the classes, ignoring repeated whitespace
    var classes = this.getAttribute('class').split(/\s+/);
    //get the unique classes
    var uniqueClasses = uniqueValues(classes);
    //return true if the unique classes are less than the classes
    return classes.length != uniqueClasses.length;
  }).show();
});

$('.show_duplicate').on('click', function () {
  //get the specific class we want to show duplicates for
  var targetClass = this.getAttribute('data-color');
  
  $rows.hide().filter(function(){
    //get the classes, ignoring repeated whitespace
    var classes = this.getAttribute('class').split(/\s+/);
    //get count of targetClass
    var classCount = classes.filter(function(className){ return className === targetClass; }).length;
    //return true if the unique classes are less than the classes
    //and the specific class appears multiple times
    return classCount > 1;
  }).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="duplicates">Display Duplicates</button>
<button id="show_red">Show Only Red</button>
<button class="show_duplicate" data-color="red">Show Duplicate Red</button>
<button class="show_duplicate" data-color="white">Show Duplicate White</button>
<button id="reset">Reset</button>

<ul class="myList">
  <li class="list_entry  red red blue 1">Element1</li>
  <li class="list_entry  red blue blue 2">Element2</li>
  <li class="list_entry  pink 3">Element3</li>
  <li class="list_entry  orange orange 4">Element4</li>
  <li class="list_entry  black white 5">Element5</li>
  <li class="list_entry  white white 6">Element6</li>
  <li class="list_entry  black orange 7">Element7</li>
  <li class="list_entry  test 8">Element8</li>
  <li class="list_entry  something something 9">Element9</li>
  <li class="list_entry  single 10">Element10</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请注意，在同一元素上两次使用相同的类名并不严格有效;如果您检查元素的classList，您将看到已删除重复的类。

幸运的是，我们可以利用该行为来检测重复类名的存在，而无需直接测试数组的唯一性：只需比较classList中的类数和raw属性值中的数字。

＆＃13;

＆＃13;

$('#duplicates').on("click", function() {
  $(".list_entry")
    .show()
    .each(function() {
      var x = this.classList.value.split(/\s+/);
      var y = this.classList;
      if (x.length === y.length) { // no duplicates
        $(this).hide() 
      }
    })
})

$('#reset').on("click",function() {
  $('.list_entry').show()
})
$('#show_red').on("click",function() {
  $('.list_entry').hide()
  $('.list_entry.red').show()
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="duplicates">Display Duplicates</button>
<button id="show_red">Show Only Red</button>
<button id="reset">Reset</button>



<ul class="myList">
  <li class="list_entry  red red blue 1">Element1</li>
  <li class="list_entry  red blue blue 2">Element2</li>
  <li class="list_entry  pink 3">Element3</li>
  <li class="list_entry  orange orange 4">Element4</li>
  <li class="list_entry  black white 5">Element5</li>
  <li class="list_entry  white white 6">Element6</li>
  <li class="list_entry  black orange 7">Element7</li>
  <li class="list_entry  test 8">Element8</li>
  <li class="list_entry  something something 9">Element9</li>
  <li class="list_entry  single 10">Element10</li>
</ul>

＆＃13;

＆＃13;

＆＃13;