Databases
StackOverflow2013
Postsdbo
POApply data-filter on <a>
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POApply data-filter on <a>
    text
    copied!<p>I am using a showcase display which apply filters to the data depending on the category.</p> <pre><code>&lt;nav id="portfolio-filter" class="span12"&gt; &lt;ul&gt; &lt;li class="active all"&gt; &lt;a href="#" data-filter="*"&gt;View All&lt;/a&gt; &lt;/li&gt; &lt;li class="other"&gt; &lt;a href="#" data-filter=".cat1"&gt;Category 1&lt;/a&gt; &lt;/li&gt; &lt;li class="other"&gt; &lt;a href="#" data-filter=".cat2"&gt;Category 2&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p></p> <p>This above is the nav list that is used to click and apply the data-filter</p> <p>It hides divs with the following format</p> <pre><code>&lt;div class="portfolio-item cat1 v1 isotope-item" style="-webkit-transform: translate(0px, 0px);"&gt; &lt;div class="he-wrap tpl2"&gt; &lt;img src="" alt=""&gt; &lt;div class="shape2"&gt;&lt;/div&gt; &lt;div class="overlay he-view"&gt; &lt;div class="bg a0"&gt; &lt;div class="center-bar v1"&gt; &lt;a href="#" class="link a0"&gt;&lt;/a&gt; &lt;p class="short_desc"&gt;short descript&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="project"&gt; &lt;h6 class="helvetica"&gt;&lt;a href="#"&gt;Title h6&lt;/a&gt;&lt;/h6&gt; &lt;span class="category"&gt;Category1&lt;/span&gt; &lt;/div&gt; </code></pre> <p></p> <p>Here is what I am trying to do with this. There are category pages that will and should ONLY display the category of its divs only, but when the page loads, if there are anything in the category it will just display every single item and I want it to not do that.</p> <p>so i removed the first Li -> View All and tried ready -> click();</p> <p>but it did not work as I imagined what are my options at this?</p> <p>(here is my second in progress approach hide all div at ready. pull the div attr for data-filter then unhide divs with classes of the data-filter field?)</p> <p>any input/help or comment would be great.</p> <p>-----updated</p> <pre><code>&lt;script type="text/javascript"&gt; $("document").ready(function() { var $cat = $("#portfolio-filter ul li:first-child a").attr('data-filter'); $(".isotope").isotope({ filter: ".cat1" }); if ($cat !='*'){ //$(".v1:not("+$cat+")").css("display","none"); } }); &lt;/script&gt; </code></pre> <p>it just won't apply the correct filters ~ it always displays none when I add the filter</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