Databases
StackOverflow2013
Postsdbo
POto filter results with jQuery when clicking li items
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POto filter results with jQuery when clicking li items
    text
    copied!<p>I've been looking all over for a demo/sample of a simple list where I can sort items by class, with multiple input/tags and(!) then of course <strong>if all are unchecked then all results should show up again</strong>.</p> <p>After having put together loads of bits and pieces from clues from all over, it finally works! </p> <p>My question is - how can I optimize this solution? (Can it be optimized?)</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bunko.se webbdesign exempel&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="mystyle.css" /&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="filters"&gt; &lt;input type="checkbox" value="teacher" /&gt;teacher&lt;br /&gt; &lt;input type="checkbox" value="math" /&gt;math&lt;br /&gt; &lt;input type="checkbox" value="principal" /&gt;principal&lt;br /&gt; etc.. &lt;/div&gt; &lt;script&gt; //An array that will contain all filters var filter_array = new Array(); // activates if checkbox is clicked jQuery(".filters input").click(function() { // Empties the array // - so that it removes values that were previously selected but are now unchecked. var filter_array = new Array(); jQuery('.filters input:checked').each( function() { // Add checked box value to array filter_array.push(jQuery(this).val()); }); // if there are no filters then show all results! if (filter_array.length === 0) { jQuery(".search_results div").show(); } else{ jQuery(".search_results div").hide().filter('.' + filter_array.join('.')).show(); } }); &lt;/script&gt; &lt;div class="search_results"&gt; &lt;div class="math textbook free"&gt; I contain classes: math, textbook and free &lt;/div&gt; &lt;div class="science chemistry teacher"&gt; I contain classes: science, chemistry, teacher &lt;/div&gt; &lt;div class="principal teacher math"&gt; I contain classes: principal teacher math &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Ohh and how does one do the same thing but with a list of tags using ul li instead of checkboxes?</p> <p>Hopw this is of use to someone else as well! :)</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