data visibility by array iteration - javascript

Question

i have html-list with states.. all "products" class stands for a product with places.. (thats the light view). it looks like:

 <!-- product 1 -->
<div class="products" data-state="texas cali">
    <div class="product" data-state="texas"> ... </div>
    <div class="product" data-state="cali"> ... </div>
</div>
<!-- product 2 -->
<div class="products" data-state="utha arizona florida">
    <div class="product" data-state="utha "> ... </div>
    <div class="product" data-state="arizona"> ... </div>
    <div class="product" data-state="florida"> ... </div>
</div>

and a javascript function. this function works by one state (state = 'cali'). and all div´s with 'cali' going visible.

jQuery( ".products[data-state~='" + state + "']" ).fadeIn(300, function(){
    jQuery( ".product[data-state~='" + state +"']" ).show();
});

but how it works by a array-iteration of more than one states.

var stateList = new Array("florida","utha","texas");

so all states from the array stateList should be visible. thank you very much.

Answer 1

Something like this?

jQuery.each(stateList, function () {
  var state = this; // Cache the state string.
  jQuery( ".products[data-state~='" + state + "']" ).fadeIn(300, function(){
    jQuery( ".product[data-state~='" + state +"']" ).show();
  });
 });

Answer 2

The easiest way would be to iterate through the array and apply the jquery fadeIn function.

for (var i = 0; i < stateList.length; ++ i) {
  var state = stateList[i];
  jQuery( ".products[data-state~='" + state + "']" ).fadeIn(300, function(){
    jQuery( ".product[data-state~='" + state +"']" ).show();
  });
}