Databases
StackOverflow2013
Postsdbo
POFilter elements on data-attribute instead of class in jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFilter elements on data-attribute instead of class in jQuery
    text
    copied!<p>I am working on a simple method for filtering elements depending on their class. The user checks a checkbox and the jQuery does it's thing fine and turns off any element depending on the class. The line that turns off the element, and how the elements look is:</p> <pre><code>$('#ItemList div:not(.' + Filter + ')').hide(); &lt;div class="1 2 3"&gt;asdf&lt;/div&gt; </code></pre> <p>However I want to be able to use the data-xxxx attribute to do this instead of the class attribute, but I am having problems actually selecting the elements this way. What I have is below:</p> <pre><code>$("#ItemList div:not([data-filter'" + Filter + "'])").hide(); &lt;div data-filter="1 2 3"&gt;asdf&lt;/div&gt; </code></pre> <p>So, how do I go about selecting the element using the data-filter attribute instead of the class? The methods I have found on here are not working for me! Many thanks.</p> <p><strong>UPDATE</strong></p> <p>Okay, so James Allardice's reply did the trick. But has caused another issue that I probably should I said in the original post.</p> <p>Each data-xxxx attribute can have a number of values, I need this filter to work so that if any one of the value shows up it will not hide the element.</p> <pre><code>$('#Filters input').change(function() { $('#ItemList div').show(); $('input').each(function() { var Checked; if(Checked = $(this).attr('checked')) { var Filter = $(this).attr('data-filter'); $("#ItemList div:not([data-filter='" + Filter + "'])").hide(); }; }); &lt;div data-filter="1"&gt;1&lt;/div&gt; &lt;div data-filter="1 3"&gt;1 3&lt;/div&gt; </code></pre> <p>So for example if a checkbox with the following attribute is checked it will show both divs:</p> <pre><code>data-filter="1" </code></pre> <p>But if the attribute is like this it will only show the second:</p> <pre><code>data-filter="3" </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload