循环遍历所有可用的css属性以获得计数？

Question

I have a list of database results, each tagged with css properties for filtering purposes. Some could have many tags, some few.

    <ul class="results">
      <li class="filterThis property propertysome property other propertyetc>
        <!— item info —> 
      </li>
      <!— next item —>
    </ul>

This line counts the visible number of results that have one particular css property ('.property' in this case).

    var numProperty = $('.filterThis.property:visible').length

And this updates the number in the list of filters, which are loaded after the results are loaded

    $(".whenReady label span.property”).html(numProperty);

How do I extend this to loop through all available css properties, count them as above, and update the html as above?

Each() seems like the way to go, but I can't seem to get the structure or naming right to either produce results at all, or to carry the names all the way through so I can assign the html updates.

All the possible properties are available as php results, so that could be a json object to jQuery (or something else?), but I’m at a loss of how to take the next steps and get the desired functionality.

Any help would be greatly appreciated.

Answer 1

Couldn't you fix this in the backend? For example, keep track of the available filters:

<?php
  $results = .... ;
  $filters = array();

  foreach($result in $results){
    // assuming each result has an array of filters
    $filters = array_merge($filters, $result['filter']);
  }

  $filters = array_unique($filters);
  $csFilters = implode(',',$filters);
?>

With the example above, you have a comma seperated string with available filters which you can then apply as a data-attribute on your results list:

<ul class="results" data-filters="a,b,c,d">

Now you can access theses filters in jQuery:

$('.results').data('filters').split(',');