Jquery - Check if spans has same content but independently for every div

Question

I want to check if the span has the same content as any other span. So I can add class to hide them. My goal is to keep the first one and hide the others.

Now here is the javascript that works but the result is not what I want.

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


  Java 
  Php
  Python 
  Php 



  Php 
  Java
  Java 
  Python 
  Php

The result is:


Java
Php
Python
Php (hide)
Java (hide)



Php (hide)
Java (hide)
Java (hide)
Python
Php (hide)

However, what I want is:


Java
Php
Python
Php (hide)
Java (hide)



Php 
Java 
Java (hide)
Python
Php (hide)

I also need a case insensitive solution.

mplungjan · Answer

You need a nested loop and reset the array each 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; }



  Java
  Php
  Python
  php
  Java



  Php
  Java
  Java
  Python
  Php

Jquery - Check if spans has same content but independently for every div

1 Answers