title: javascript cannnot detect same element in array
body: <p>I have the code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var classCode = "";
  var colorUsed = [];
  var classes = [];
  var color = ["yellow", "lightblue", "lightgreen", "pink", "orange", "cyan", "lightgrey", "plum", "wheat", "khaki"];
  
  function colorClass(row) {
    classCode = $(row).html();
    var index = -1;
  
    if (colorUsed.length != 0) {
      index = classes.indexOf(classCode);
    } else {
      index = -1;
    }
  
    while (index == -1) {
      colorNum = Math.floor((Math.random() * 10));
  
      if (!(color[colorNum] in colorUsed)) {
        colorUsed.push(color[colorNum]);
        classes.push(classCode);
        index = 1;
      } else {
        alert("same color!");
        index = -1;
      }
    }
  
    if (index != -1) {
      colorNum = classes.indexOf(classCode);;
    }
  
    $(row).css("background-color", colorUsed[colorNum]);
  }
  
     </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table border="1"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Month&lt;/th&gt;
      &lt;th&gt;Savings&lt;/th&gt;
      &lt;th&gt;Savings for holiday!&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr&gt;&lt;td colspan="3" onclick="colorClass(this);"&gt;ClassA&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan="3" onclick="colorClass(this);"&gt;ClassC&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan="3" onclick="colorClass(this);"&gt;ClassD&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan="3" onclick="colorClass(this);"&gt;ClassE&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan="3" onclick="colorClass(this);"&gt;ClassF&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan="3" onclick="colorClass(this);"&gt;ClassG&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan="3" onclick="colorClass(this);"&gt;ClassH&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I use "in" function to avoid same color to apply, but it is not working, I know there is another way to use which to loop the element one-by-one and compare it, but I don't like to use that.</p>
  
  <p>Or any other way to detect it? Since there is no hashset in javascript, is it possible to implement in Jquery?</p>