CODEWITHSUNDEEP
jqueryhtmlarrayscompare
Vincent Chua
Vincent Chua

Reputation: 1009

jQuery compare two arrays?

I have an array and I would like to create another new array and the values are extracted from the HTML itself, then I would like to compare both the values and output the match value.

My existing array to compare:

var designersArrSelected = ["Von Blan","Foo Can","Diane con Fursternberg","BCBG MAX Azria"];

My HTML

<ul id="seasonsDropDown">
  <li data-season="FALL 2013 HAUTE COUTURE">FALL 2013 HAUTE COUTURE
    <ul class="designers">
      <li data-designer="Alexander Wang">Alexander Wang</li>
      <li data-designer="BCBG MAX Azria">BCBG MAX Azria</li>
      <li data-designer="Diane con Fursternberg">Diane con Fursternberg</li>
      <li data-designer="Diane Von De">Diane Von De</li>
    </ul>
 </li>
</ul>

To grab the all designer's names from the HTML I've used:

var designersArrAll = [];
var i = 0;


$(".designers>li").each(function(){
    designersArrAll[i++] = $(this).attr("data-designer");
});

Base on my example the outcome should select "Diane con Fursternberg" and "BCBG MAX Azria since there are two matches, but how should I compare both the arrays for the same values?

Here is the pen: http://codepen.io/vincentccw/pen/eDrox

Upvotes: 0

Views: 1093

Answers (3)

Bill Criswell
Bill Criswell

Reputation: 32921

You can do this instead of the loop you have to make the designersArrAll array.

var designersArrAll = $.map( $('.designers > li'), function(el){
  return $(el).data('designer');
});

As for comparing two arrays you can use the code on this question: How to know if two arrays have the same values

Upvotes: 1

Geomatic
Geomatic

Reputation: 179

If you want to do it the old-fashioned for loop way, here's some code i picked up here: How do I check if an array includes an object in JavaScript?. An if conditional inside each, you could style elements while matches are hit. Probably not the most efficient, but it works.

fiddle: http://jsfiddle.net/LmQ9U/

    var designersArrAll = [];
    var designersArrSelected = ["Von Blan","Foo Can","Diane con Fursternberg","BCBG MAX Azria"];
     var i = 0;


     $(".designers>li").each(function(){
         designersArrAll[i++] = $(this).attr("data-designer");
     });

    $(".designers>li").each(function(){
        designer = $(this).attr("data-designer");
        designersArrAll[i++] = designer;           
        if ( contains( designersArrSelected , designer) ) {
            // do something here
            $(this).css('background', 'yellow');
        }
    });
    function contains(a, obj) {
        for (var i = 0; i < a.length; i++) {
                if (a[i] === obj) {
                    return true;
                }
            }
            return false;

Upvotes: 1

Zegar
Zegar

Reputation: 1015

Try with $.inArray. You may use it like here:

var found = $.inArray('pattern', stringToBeSearched) > -1;

The result with be a number indicating where in your string begins a pattern you are looking for. -1 will let you know that there is no such a pattern in the stringToBeSearched.

Upvotes: 1

Related Questions