StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAdvanced filtering with jQuery, need direction on best way
text
Body
copied!<p>I need advice on the best way to go about doing some filtering in jQuery.</p> <p><strong>HTML</strong></p> <p>I have a form that contains an unorderd list of attributes:</p> <pre><code><form name="attrList"> <ul> <li> <input type="checkbox" name="FILTER" value="1+" /> 1+ </li> <li> <input type="checkbox" name="FILTER" value="Adrian Chesterman" /> Adrian Chesterman </li> <li> <input type="checkbox" name="FILTER" value="Green" /> Green </li> </ul> </form> </code></pre> <p>Then I have a set of divs. I gave the div an attribute of "attrList", like so:</p> <pre><code><div class="productContainer" attrList="1+,Andy Thomas"> <h3>Some Name Here</h3> <ul> <li>1+</li> <li>Andy Thomas</li> </ul> </div> </code></pre> <p><strong>jQuery</strong></p> <ol> <li>When a any input[name=FILTER] is clicked, I'm building a list of all input[name=FILTER]:checked. </li> <li>I'm looping through all divs</li> <li>During the loop, I'm checking the attrList attribute (e.g. attrList="red") on that div to see if what was clicked is found in that list. </li> <li>If it isn't found I'm moving the div out of sight into a different div</li> </ol> <p><strong>JSBin Example</strong></p> <p>The example above has been simplified so you could see the basics of what I was doing. <a href="http://jsbin.com/upeki3/8" rel="nofollow">JSBin Link Here</a></p> <p><strong>Need Your Advice</strong></p> <p>This is the first time I've gone about doing this kind of filtering; I'm just looking for a best practice from someone who has been here before. I'd really appreciate your feedback!</p>

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