Использование Jquery: сравнение двух массивов для ЛЮБОГО совпадения

Question

Я ищу краткий способ сравнить два массива для любого соответствия.

Я использую это сравнение, чтобы применить определенный стиль к любой ячейке таблицы с соответствующим содержимым. Один массив представляет собой статический список содержимого, которое должно содержаться хотя бы в одной ячейке таблицы на странице. Другой массив генерируется JQuery и представляет собой текст всех ячеек таблицы.

Причина, по которой мне приходится сравнивать контент для применения стиля, заключается в том, что документ HTML будет со временем семантически изменяться, генерируется различными версиями Excel (довольно ужасно выглядящий код), и этот сценарий должен это учитывать. Я знаю, что содержимое, к которому я стремимся применить стиль в этом документе, никогда не изменится, поэтому мне нужно обнаружить все совпадения для этого содержимого, чтобы применить к ним стили.

Итак, код должен выглядеть примерно так (на английском языке):

для каждой ячейки таблицы, сравнить текст ячейки с содержимым массива. Если есть совпадение, примените этот CSS к ячейке таблицы.

Это то, что у меня есть (и я знаю, что это неправильно):

$(document).ready(function(){
    $("a.loader").click(function(event){
         event.preventDefault();
         var fileToLoad = $(this).attr("href");
         var fileType = $(this).text();
         var makes = new Array("ACURA","ALFA ROMEO","AMC","ASTON MARTIN","ASUNA","AUDI","BENTLEY","BMW","BRITISH LEYLAND","BUICK","CADILLAC","CHEVROLET","CHRYSLER","CITROEN","COLT","DACIA","DAEWOO","DELOREAN","DODGE","EAGLE","FERRARI","FIAT","FORD","GEO","GMC","HONDA","HUMMER","HYUNDAI","INFINITI","INNOCENTI","ISUZU","JAGUAR","JEEP","KIA","LADA","LAMBORGHINI","LANCIA","LAND ROVER","LEXUS","LINCOLN","LOTUS","M.G.B.","MASERATI","MAYBACH","MAZDA","MERCEDES BENZ","MERCURY","MG","MINI","MITSUBISHI","MORGAN","NISSAN (Datsun)","OLDSMOBILE","PASSPORT","PEUGEOT","PLYMOUTH","PONTIAC","PORSCHE","RANGE ROVER","RENAULT","ROLLS-ROYCE / BENTLEY","SAAB","SATURN","SCION","SHELBY","SKODA","SMART","SUBARU","SUZUKI","TOYOTA","TRIUMPH","VOLKSWAGEN","VOLVO","YUGO","Acura","Alfa Romeo","Amc","Aston Martin","Asuna","Audi","Bentley","Bmw","British Leyland","Buick","Cadillac","Chevrolet","Chrysler","Citroen","Colt","Dacia","Daewoo","Delorean","Dodge","Eagle","Ferrari","Fiat","Ford","Geo","Gmc","Honda","Hummer","Hyundai","Infiniti","Innocenti","Isuzu","Jaguar","Jeep","Kia","Lada","Lamborghini","Lancia","Land Rover","Lexus","Lincoln","Lotus","M.G.B.","Maserati","Maybach","Mazda","Mercedes Benz","Mercury","Mg","Mini","Mitsubishi","Morgan","Nissan (Datsun)","Oldsmobile","Passport","Peugeot","Plymouth","Pontiac","Porsche","Range Rover","Renault","Rolls-Royce / Bentley","Saab","Saturn","Scion","Shelby","Skoda","Smart","Subaru","Suzuki","Toyota","Triumph","Volkswagen","Volvo","Yugo");
         $("div#carApp").html("<img src='images/loadingAnimation.gif' alt='LOADING...' />");
         $("div#carApp").load(fileToLoad, function(){
             $("#carApp style").children().remove();
             $('#carApp td').removeAttr('style');
             $('#carApp td').removeAttr('class');
             $('#carApp table').removeAttr('class');
             $('#carApp table').removeAttr('style');
             $('#carApp table').removeAttr('width');
             $('#carApp tr').removeAttr('style');
             $('#carApp tr').removeAttr('class');
             $('#carApp col').remove();
             $('#carApp table').width('90%');
             var content = $("#carApp table td");
             jQuery.each(content, function() {
                 var textValue = $(this).text();
                 if (jQuery.inArray(textValue, makes)==true)
                    $(this).css("color","red");
             });
         });
    });
});

Есть идеи?

Answer 1

Вы проверяете $.inArray(...) == true. inArray фактически возвращает целое число с индексом элемента в массиве (в противном случае -1.). Таким образом, вы хотите проверить, больше или равно 0.

Вот как вы можете изменить цикл each.

$('#carApp td').each(function () {
    var cell = $(this);
    if ($.inArray(cell.text(), makes) >= 0) {
        cell.addClass('selected-make');
    }
});

Я использую класс CSS вместо атрибута style, потому что лучше размещать стили в файле CSS, а не в коде JavaScript. Проще обновлять таким образом (особенно если вы хотите применить один и тот же стиль в нескольких местах вашего кода.)

Другие моменты, на которые стоит обратить внимание:

• jQuery-выбор также имеет функцию each(...). Таким образом, вы можете сделать $(...).each(...) вместо jQuery.each($(...), ...)
• jQuery и $ - это один и тот же объект, если у вас нет других структур, которые переопределяют переменную $. Поэтому вы можете сделать $.inArray(...) вместо jQuery.inArray(...). Это вопрос вкуса.

Answer 2

Оптимизация заключалась бы в создании хэша (он же словарь):

var makes = { "ACURA": 1,"ALFA ROMEO": 1,"AMC": 1, ...};

Тогда вам не нужно каждый раз повторять макеты с помощью inArray.

...
var textValue = $(this).text();
  if (makes[textValue] == 1)
    $(this).css("color","red");
  }
...

Answer 3

Вы смотрели на $.grep()?

Находит элементы массива, которые удовлетворить функцию фильтра. исходный массив не затрагивается. Функция фильтра будет передана два аргументы: текущий элемент массива и его индекс. Функция фильтра должна вернуть true, чтобы включить элемент в массив результатов.