如何检查具有特定值的div是否重复，然后在jQuery中隐藏重复的div

Question

我在检查具有特定值的div是否重复，然后隐藏该重复的div时遇到麻烦。

这是我的代码：

 <div class="div">Java</div> <div class="div">Python</div> <div class="div">Php</div> <div class="div">Java</div> <div class="div">Java</div> <div class="div">Java</div> 

Answer 1

您需要遍历所有div类，然后检查当前div类是否已存在，这将使用div类html内容进行检查。 脚本是这样的：

var divs = [];
$(".div").each(function(i,v){
   if(divs.indexOf(v.html())>=0){
       divs.push(v.html()); //collect all unique divs
   }else{
      //this is the duplicate div. need to hide it.
      $(this).hide();
   }
});

Answer 2

试试这个，我希望这是您想要的。

 var a = new Array(); $('.div').each(function(index) { text = $(this).text(); if($.inArray(text, a)!=-1){ $(this).closest('.div').hide(); }else{ a.push(text); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div">Java</div> <div class="div">Python</div> <div class="div">Php</div> <div class="div">Java</div> <div class="div">Java</div> <div class="div">Java</div> 

Answer 3

好吧，这取决于是否要检查文本中的hes是否相同，则可以在所有div上运行并使用诸如array之类的东西来检查是否已经存在。

 var exists = []; $(document).ready(function(){ $(".div").each(function(){ var text = $(this).text(); if(exists.indexOf(text) != -1){ $(this).hide(); }else{ exists.push(text); } }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div">Java</div> <div class="div">Python</div> <div class="div">Php</div> <div class="div">Java</div> <div class="div">Java</div> <div class="div">Java</div> 

Answer 4

您可以将要删除重复项的所有元素包装在类.container然后可以获取此元素的所有子元素，然后使用.toArray()将其转换为数组。 然后，您可以使用Set删除此数组中的所有重复项：然后使用Set删除数组中的所有重复项，然后显示以下内容：

 const unique = $('.container').children().toArray().map(e => '' + e.outerHTML); const elems = [...new Set(unique)].join(''); $('.container').html(elems); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="div">Java</div> <br /> <div class="div">Python</div> <div class="div">Php</div> <div class="div">Java</div> <div class="div">Java</div> <div class="div">Java</div> </div> 

如果您希望可以将其用作单线：

$('.container').html([...new Set($('.container').children().toArray().map(e => ''+e.outerHTML))].join(''));