Jquery - 檢查跨度是否具有相同的內容，但每個 div 獨立

Question

我想檢查跨度是否與任何其他跨度具有相同的內容。 所以我可以添加 class 來隱藏它們。 我的目標是保留第一個並隱藏其他。

現在這里是 javascript 工作但結果不是我想要的。

 var itemsFound = []; $(".myspan").each(function(index) { if (itemsFound.indexOf($(this).text()) > -1) { $(this).addClass("hide"); } else { itemsFound.push($(this).text()); } });

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

結果是：

<div class="results">
Java
Php
Python
Php (hide)
Java (hide)
</div>

<div class="results">
Php (hide)
Java (hide)
Java (hide)
Python
Php (hide)
</div>

但是，我想要的是：

<div class="results">
Java
Php
Python
Php (hide)
Java (hide)
</div>

<div class="results">
Php 
Java 
Java (hide)
Python
Php (hide)
</div>

我還需要一個不區分大小寫的解決方案。

Answer 1

您需要一個嵌套循環並重置每個 div 的數組

 $("div").each(function() { let arr = []; $(".myspan", this).each(function() { var value = $(this).text().trim().toUpperCase(); if (arr.includes(value)) $(this).hide(); else arr.push(value); }); });

 .show { color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div> <span class="myspan show">Java</span> <span class="myspan show">Php</span> <span class="myspan show">Python</span> <span class="myspan">php</span> <span class="myspan">Java</span> </div> <div> <span class="myspan show">Php</span> <span class="myspan show">Java</span> <span class="myspan">Java</span> <span class="myspan show">Python</span> <span class="myspan">Php</span> </div>