jQuery比较两个数组？

Question

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

Answer 1

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.

Answer 2

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;

Answer 3

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