javascript - 使用 Jquery : Comparing Two Arrays for ANY Match

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(...)。不过，这是一个品味问题。