La comparación de 2 tablas no siempre funciona: javascript, jquery, arrays, json

Necesito comparar registros de dos matrices y agregar estilo si son iguales.
Hago esto:

var json = ["VIP Section","Master Section","Press Section","God Section"];
var sections = ["VIP Section","Master Section"];

if ( sections.length > 0 ) {
for (i = 0; i < json.length; i++) {
if ( json[i] == sections[i] ) {
$("#test-ul").append("<li style="color: red;">" + sections[i] + "</li>");
} else {
$("#test-ul").append("<li>" + json[i] + "</li>");
}
}
} else {
$("#test-ul").append("<li>No sections!</li>");
}

Sin embargo, esto no siempre funciona ...
Una vez que he coloreado es igual a los elementos, pero la próxima vez tengo todos los elementos sin color.

...

Donde es malo O tal vez es otra solución para esto?

Respuestas

La forma en que lo tiene configurado, comparará cada elemento en la misma posición en la matriz. Por ejemplo, solo compara el primer artículo en json al primer elemento en sections y así. Si su objetivo es averiguar si alguno de los elementos de json tambien estan en sections y en alguna ordenar, luego usar indexOf() en cada elemento en json para determinar si el elemento de la matriz existe también en sections. Esto funcionará sin importar el orden en el que estén.

Cuando usas indexOf() en una matriz devolverá la posición en la matriz donde se encuentra el elemento. Si no existe devolverá -1.

Nota en el siguiente fragmento, moví tu segundo elemento de matriz en json Al final de la matriz para probar este punto.

var json = ["VIP Section","Press Section","God Section","Master Section"];
var sections = ["VIP Section","Master Section"];

if ( sections.length > 0 ) {
for (i = 0; i < json.length; i++) {
if ( sections.indexOf(json[i]) > -1 ) {
$("#test-ul").append("<li style="color: red;">" + json[i] + "</li>");
} else {
$("#test-ul").append("<li>" + json[i] + "</li>");
}
}
} else {
$("#test-ul").append("<li>No sections!</li>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test-ul"></ul>

Otras lecturas:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf