Array Workshop 1

by Ryan Brackett

HTML

This script takes two arrays, removes duplicates and keeps the single-use values. The values are then assigned as classes to the div.
<br/>
<br/>
<div>
  Check my classes!
</div>

CSS

body {
  padding: 40px;
  font-family: Arial;
}

div {
  font-weight: bold;
  border-radius: 5px;
}

.green {
  color: green;
}

.brown {
  border: 2px dashed brown;
  padding: 20px;
}

.orange {
  background-color: orange;
}

JavaScript

var Array1 = ['red', 'blue', 'brown', 'orange'];
var Array2 = ['red', 'blue', 'green'];
var ArrayDuplicates = [];


$.each(Array1, function(indexA, valueA) {
  $.each(Array2, function(indexB, valueB) {
    if (valueA == valueB) {
      Array1[indexA] = null;
      Array2[indexB] = null;
      return false; //break out of inner each loop                     
    }
  });
});

$.each(Array1.concat(Array2), function(idx, val) {
  if (val != null) ArrayDuplicates.push(val);
});

$.each(ArrayDuplicates, function(index, value) {
  $("div").addClass(value)
});