Geek Answers Handbook

Using jQuery: comparing two arrays for ANY Match

I am looking for a brief comparison of two arrays for any match.

I use this comparison to apply a specific style to any cell in a table that has relevant content. One array is a static list of content that must be contained in at least one table cell on the page. Another array is generated by jQuery and is the text of all the cells in the table.

The reason I have to compare the content with the applied style is that the HTML document will semantically change over time, created by different versions of excel (pretty awful looking code), and this script should take this into account. I know that the content I'm looking for to apply style in this document will never change, so I need to define all the matches for this content in order to apply styles to them.

So the code should be something like (in English):

For each table cell, compare the cell text with the contents of the array. If there is a match, apply this css to the table cell.

This is what I still have (and I know it is wrong):

$(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","MGB","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","MGB","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"); }); }); }); });

Any ideas?

+4
source share
3 answers

You are checking $.inArray(...) == true . inArray actually returns an integer with the index of the element in the array (else -1 .) So, you want to check if it is greater than or equal to 0 .

Here you can change each loop.

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

I use the CSS class instead of the style attribute, because it is better to apply styling in the CSS file, and not in your JavaScript code. It's easier to update this method (especially if you want to apply the same style in several places in your code.)

Other comments:

  • JQuery parameters have a function each(...) . That way you can do $(...).each(...) instead of jQuery.each($(...), ...)
  • jQuery and $ are the same object unless you have other frameworks that override the $ variable. So you can do $.inArray(...) instead of jQuery.inArray(...) . However, it is a matter of taste.
+1
source

Have you looked at $.grep() ?

Finds array elements that satisfy the filter function. the original array is not affected. the filter function will be passed in two arguments: the current element of the array and its index. The filter function must return 'true' to include the element in the result array.

0
source

Optimization should be to create a hash (aka dictionary):

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

Then you do not need to iterate each time with inArray.

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

More articles:


All Articles