List.js filter with multiple values in data attribute

Question

I'm using list.js to do some simple filtering on a list - but running in to a little snag.

Some items in the list may look like this:

    <li class="grid-item" data-attribute="attr1, attr2, attr3" data-attributeTwo="a2">

The filters that you click look like this:

<li data-filter="attr1">Attr1</li>
<li data-filter="attr2">Attr1</li>
<li data-filter="attr3">Attt3</li>

And I have my filter function set up like this:

$('.filter-nav ul li').on('click', function() {

            var filterValue = $( this ).attr('data-filter');

            list.filter(function(item) {
              if (
                item.values().attribute == filterValue ||
                item.values().attributeTwo == filterValue ||
              ) {
                return true;
              } else {
                return false;
              }
            });
            return false;
          });

Is it possible to filter those comma separated attributes by their values respectively? As in, I could click Attr1, Attr2, or Attr3 and the filter would spit out what's appropriate?

danhannigan · Accepted Answer · 2016-04-19 19:35:01Z

1

Never mind, I think I got it. I took my filterValue and turned it in to a string (called solutionValue and then checked it against indexOf

so

var filterValue = $( this ).attr('data-filter');
var solutionValue = String(filterValue);

list.filter(function(item) {

              if (
                item.values().solution.indexOf(solutionValue) >= 0
              ) {
                return true;
              } else {
                return false;
              }
            });
            return false;

answered Apr 19, 2016 at 19:35

danhannigan

231 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

List.js filter with multiple values in data attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related