title: Check for partial match in JavaScript if statement
body: <p>I've got elements set up something like this:</p>
  
  <pre><code>&lt;div class="cat" data-cat="example-cat, test-cat, test-category"&gt;
      ...
  &lt;/div&gt;
  &lt;div class="cat" data-cat="test-category"&gt;
      ...
  &lt;/div&gt;
  &lt;div class="cat"&gt;
      ...
      &lt;div class="cat" data-cat="example-cat, test-category"&gt;
          ...
      &lt;/div&gt;
      &lt;div class="cat" data-cat="test-category, one-more-cat"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using JavaScript, I need to check each bit of text between commas for a match with a user selected value. For example, if the user selected "test-cat," I need to check each <code>div</code> to see if <code>data-cat</code> matches the selection. If it does, I need to add <code>class="active"</code> to each matching <code>div</code>.</p>
  
  <p>Part of the trick is that if the user selects <code>test-cat</code>, a <code>div</code> with a <code>data-cat</code> of <code>test-category</code> should not return positive. Only exact matches should be consider matches.</p>
  
  <hr>
  
  <p>I had already set up a complex filtering system with support for multiple filters, but the client wants to be able to set multiple categories per div, which is making this tricky. I have a script set up to show matches if the attribute is an exact match, and I'll be trying to modify this to work as I need it to:</p>
  
  <pre><code>$(document).ready(function() {
      var changedOnce = false;
      $("#filters select").change(function() {
          $(".cat").each(function() {
              $(this).attr("data-match", "true");
              $(this).removeClass("open");
          });
          $("#filters select").each(function() {
              var filter = $(this).attr("name");
              var value = $(this).val();
              $(".cat").each(function() {
                  if ($(this).attr("data-match") === "false") {
                      return true;
                  }
                  var attr = $(this).attr("data-" + filter);
                  var childAttr = $(this).find(".cat").attr("data-" + filter)
                  if ((typeof attr !== typeof undefined &amp;&amp; attr !== false) || (typeof childAttr !== typeof undefined &amp;&amp; childAttr !== false)) {
                      if ($(this).attr("data-" + filter) === value || $(this).find(".cat").attr("data-" + filter) === value || value === "") {
                          $(this).attr("data-match", "true");
                          $(this).parents(".cat").attr("data-match", "true");
                      } else {
                          $(this).attr("data-match", "false");
                          return true;
                      }
                  } else {
                      if (value !== "") {
                          $(this).attr("data-match", "false");
                          return true;
                      } else {
                          $(this).attr("data-match", "true");
                          $(this).parents(".cat").attr("data-match", "true");
                      }
                  }
              });
          });
      });
  });
  </code></pre>
  
  <p>My filters are set up something like:</p>
  
  <pre><code>&lt;div id="filters"&gt;
      &lt;select name="cat"&gt;
          &lt;option value="test-cat"&gt;Test Cat&lt;/option&gt;
          &lt;option value="example-cat"&gt;Example Cat&lt;/option&gt;
          ...
      &lt;/select&gt;
      ...
      &lt;select name="nth-filter"&gt;
          ...
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It's probably not the most elegant solution (I'm no JavaScript master), but it was working, until I made this most recent change. If you need more information, just let me know.</p>
  
  <hr>
  
  <p>UPDATE: Here's my current script, using <code>.data()</code> and <code>.split()</code> as suggested. I'm having trouble getting the parent category to show as a miss if all its children are misses, but I'll post a separate question for that.</p>
  
  <pre><code>$(document).ready(function() {
      $("#filters select").change(function() {
          $(".cat").each(function() {
              $(this).data("match", true);
              $(this).css("opacity", "1");
              // $(this).removeClass("open");
          });
          $("#filters select").each(function() {
              var filter = $(this).attr("name");
              var value = $(this).val();
              $(".cat").not(".primary").each(function() {
                  if ($(this).data(filter)) {
                      var match = $(this).data("match");
                      var attributes = $(this).data(filter).split(", ");
                      var i = 0;
                      $(attributes).each(function() {
                          if (value &amp;&amp; attributes[i] !== value) {
                              match = false;
                          } else {
                              match = true;
                              return true;
                          }
                          i++;
                      });
                      $(this).data("match", match);
                  }
                  if ($(this).data("match") === false) {
                      $(this).css("opacity", "0.25");
                  } else {
                      $(this).css("opacity", "1");
                  }
              });
          });
      });
  });
  </code></pre>