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

Posted 2023-05-09

技术标签:

【中文标题】使用 Jquery：比较两个数组以进行任何匹配【英文标题】：Using Jquery: Comparing Two Arrays for ANY Match 【发布时间】：2010-11-11 18:19:18 【问题描述】：

我正在寻找一种简洁的方法来比较两个数组以进行任何匹配。

我正在使用此比较将特定样式应用于具有匹配内容的任何表格单元格。一个数组是应包含在页面上至少一个表格单元格中的内容的静态列表。另一个数组是由 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");
             );
         );
    );
);

有什么想法吗？

【问题讨论】：

$.inArray 返回找到的值的索引；不是布尔值。目前，您正在测试任何评估为真（零，有效索引，不评估为真）的东西。可能不是你的问题，但仍然值得一提。 【参考方案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(...)。不过，这只是口味问题。

【讨论】：

inArray 不返回布尔值。是的，我在提交帖子并立即对其进行编辑后发现了它，您一定是在我没有编辑它的那一刻加载了页面=P 因为布尔值而无法正常工作；我改为！= -1，它工作正常。我通常也会把它改成一个类——我会的，但我需要先让它工作，所以我只是在里面放了一个快速的 css 样式更改以进行测试。再次感谢！！！啊，我明白了。我在我的答案中添加了一些我忘记提及的点（我从您的代码中更改的内容。）我在想这个！我总是在文档中的示例中进行钓鱼，而类似的事情对我来说从来都不是绝对清楚的。我以为我可以用 $ 代替 jQuery，但这些示例都有 jQuery.whatever()。再次感谢。【参考方案2】：

你看过$.grep()吗？