jQuery filtering divs based on multiple data attributes

Question

I have multiple divs on a page, each with the following data attributes: data-one, data-two, data-three, data-four & data-five. The following code is creating a filterList array like so: ['one-value', 'two-value', 'three-value', 'four-value', 'five-value'] depending on which values are selected in the five dropdowns. Building of the filterList array is working.

However some of the divs have multiple data attribute values, i.e. data-one="one-value,one-value-2,one-value-3"

If the divs contain only one data attribute value, it seems to work fine, but it's not working when there are multiple values separated by a comma.

Any help would be hugely appreciated!

var filterList = [];

jQuery("#jsonFilters ul#one ul li a.active").each(function() {
  var dataOne = jQuery(this).attr("data-one");
  filterList.push(dataType);
});

jQuery("#jsonFilters ul#two ul li a.active").each(function() {
  var dataTwo = jQuery(this).attr("data-two");
  filterList.push(dataTwo);
});

jQuery("#jsonFilters ul#three ul li a.active").each(function() {
  var dataThree = jQuery(this).attr("data-three");
  filterList.push(dataThree);
});

jQuery("#jsonFilters ul#four ul li a.active").each(function() {
  var dataFour = jQuery(this).attr("data-four");
  filterList.push(dataFour);
});

jQuery("#jsonFilters ul#five ul li a.active").each(function() {
  var dataFive = jQuery(this).attr("data-five");
  filterList.push(dataFive);
});

if (filterList.length == 0) {
  jQuery('.div').removeClass('hidden');
  jQuery('.div').fadeIn();
  console.log('No Filters');
} else {
  jQuery('.div').each(function() {
    offeringOne = jQuery(this).attr('data-one');
    offeringTwo = jQuery(this).attr('data-two');
    offeringThree = jQuery(this).attr('data-three');
    offeringFour = jQuery(this).attr('data-four');
    offeringFive = jQuery(this).attr('data-five');

    if (jQuery.inArray(offeringOne, filterList) != -1 && jQuery.inArray(offeringTwo, filterList) != -1 && jQuery.inArray(offeringThree, filterList) != -1 && jQuery.inArray(offeringFour, filterList) != -1 && jQuery.inArray(offeringFive, filterList) != -1) {
      jQuery(this).fadeIn('slow');
    } else {
      jQuery(this).hide();
    }

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div> Now if we just had some HTML here...</div>

I made a snippet of your code with jQuery added - but not of much use without the related HTML. Please edit it to add the HTML you have here. — Mark Schultheiss
– Mark Schultheiss, Commented Sep 13, 2023 at 12:58

76484 · Accepted Answer · 2023-09-13 14:45:07Z

Since your data-attribute values contain string values that represent lists of offerings delimited by commas, you will need to split those values into arrays so you can compare each offering value against the filterList.

You could re-write your jQuery('.div').each handler to something like the following:

var filterList = [
  'one-value',
  // 'one-value-2'
];

if (filterList.length == 0) {
  jQuery('.div').removeClass('hidden');
  jQuery('.div').fadeIn();
  console.log('No Filters');
} else {
  jQuery('.div').each(function() {
    const isVisible = ['data-one', 'data-two', 'data-three', 'data-four', 'data-five'].some(attr => {
      const attrValue = jQuery(this).attr(attr);
      if (!attrValue) { return; }

      const offerings = attrValue.split(',');
      
      return filterList.every(offering => offerings.indexOf(offering) > -1);
    });
    
    if (isVisible) {
      jQuery(this).fadeIn('slow');
    } else {
      jQuery(this).hide();
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div" data-one="one-value,one-value-2,one-value-3">
  Div One
</div>
<div class="div">
  Div Two
</div>
<div class="div" data-one="one-value">
  Div Three
</div>
<div class="div">
  Div Four
</div>
<div class="div" data-one="one-value-2">
  Div Five
</div>

This is great but the filters don't work together - they work independently!
@onesixty I don't understand what that means. Could you explain further?
Hi - so if i use dropdown A and select Value A - it works and shows only the divs with Value A. But then when i choose a second Dropdown B, it ignore that value doesn't filter down further. Basically all five dropdowns are supposed to filter like AND, rather than OR
@onesixty I think that what you are looking for can be achieved by replacing the filterList.some with filterList.every. I have made that change to the code snippet in my post.
Thank you for your help. I got there in the end my combining all details in 1 single data attribute then using a filter. Your code worked great and helped massivley!

Collectives™ on Stack Overflow

jQuery filtering divs based on multiple data attributes

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related