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

你看过$.grep()吗？

查找数组的元素满足过滤功能。该原始数组不受影响。该过滤功能将通过两次参数：当前数组项和它的索引。过滤功能必须返回'true'以包含该项目结果数组。

Answer 3

优化是制作哈希（又名字典）：

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

然后你不必每次都使用inArray迭代make。

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

使用Jquery：比较两个数组以进行任何匹配

3 个答案: