Databases
StackOverflow2013
Postsdbo
POjQuery attribute selector inside a jQuery object
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery attribute selector inside a jQuery object
    primarykey
    data
    text
    <p>I'm trying to set up a quicksand with multiple filters and the approach I'm taking in the following which I'm not sure if it's the best.</p> <pre><code>$filteredItems = $containerClone.find('.portfolio-item-marketing').filter(function(index){ if ( $filterA != 'all' &amp;&amp; $filterB != 'all' ) { return jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterA + ']') || jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterB + ']'); } if ( $filterA != 'all' &amp;&amp; $filterB == 'all' ) { return jQuery(this+'[data-type~='+$filterA+']') ; } if ( $filterA == 'all' &amp;&amp; $filterB != 'all' ) { return jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterB + ']'); } if ( $filterA == 'all' &amp;&amp; $filterB == 'all' ) { return jQuery(this).find('.portfolio-item-marketing'); } }); </code></pre> <p>As you see in the code I tried 2 different methods ( First "if" and second "if" ). I'm not sure if I can use find inside a filter but i also dont know how to get the attribute from the jQuery object.</p> <p>I can not use </p> <pre><code>jQuery(this).attr('data-type') == $filterA </code></pre> <p>Because the attribute maybe contain various filters. That's why I'm trying to use jQuery "~="</p> <p>Should I give up and end using a indexOf ?</p> <p>HTML markup for example:</p> <pre><code>&lt;ul class="filterA filters"&gt; &lt;li class="active"&gt;&lt;a href="javascript:void(0)" class="all"&gt;All&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0)" class="digital-books"&gt;Digital Books&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0)" class="pdf"&gt;Pdf&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class="filterB filters"&gt; &lt;li class="active"&gt;&lt;a href="javascript:void(0)" class="all"&gt;All&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0)" class="3m"&gt;3M&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0)" class="mcdonald"&gt;Mc Donald&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0)" class="sony"&gt;Sony&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="portfolio-wrap" class="clearfix"&gt; &lt;div class="portfolio-item-marketing" data-id="1" data-type="digital-books 3m "&gt;&lt;/div&gt; &lt;div class="portfolio-item-marketing" data-id="1" data-type="pdf 3m "&gt;&lt;/div&gt; &lt;div class="portfolio-item-marketing" data-id="1" data-type="digital-books sony "&gt;&lt;/div&gt; &lt;div class="portfolio-item-marketing" data-id="1" data-type="pdf mcdonald "&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Quicksand Filter script :</p> <pre><code>jQuery(document).ready(function(){ if(jQuery().quicksand) { portfolio_quicksand(); } }); function portfolio_quicksand() { // Setting up our variables var $filter; var $container; var $containerClone; var $filterLink; var $filteredItems // Set our filter $filterA = jQuery('.filterA li.active a').attr('class'); $filterB = jQuery('.filterB li.active a').attr('class'); // Set our filter link $filterLink = jQuery('.filters li a'); // Set our container $container = jQuery('#portfolio-wrap'); // Clone our container $containerClone = $container.clone(); // Apply our Quicksand to work on a click function // for each of the filter li link elements $filterLink.click(function(e) { // Remove the active class jQuery(this).parent().parent().find('li').removeClass('active'); // Apply the 'active' class to the clicked link jQuery(this).parent().addClass('active'); // Set our filter $filterA = jQuery('.filterA li.active a').attr('class'); $filterB = jQuery('.filterB li.active a').attr('class'); $filteredItems = $containerClone.find('.portfolio-item-marketing').filter(function(index){ if ( $filterA != 'all' &amp;&amp; $filterB != 'all' ) { return jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterA + ']') || jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterB + ']'); } if ( $filterA != 'all' &amp;&amp; $filterB == 'all' ) { return jQuery(this+'[data-type~='+$filterA+']') ; } if ( $filterA == 'all' &amp;&amp; $filterB != 'all' ) { return jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterB + ']'); } if ( $filterA == 'all' &amp;&amp; $filterB == 'all' ) { return jQuery(this).find('.portfolio-item-marketing'); } }); // Finally call the Quicksand function $container.quicksand($filteredItems, { // The duration for the animation duration: 750, // The easing effect when animating easing: 'easeInOutCirc', // Height adjustment set to dynamic adjustHeight: 'dynamic' }); }); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USchifliiiii
    1. USchifliiiii
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COShow your mark-up, or a representative sample; I think this could be done more easily/succinctly, but I don't know what your filters are, or where they're coming from.
      singulars
      1. POjQuery attribute selector inside a jQuery object
      1. USDavid Thomas
    2. COWhat is this code doing? I can't understand a thing, I would try to rename those variables with something meaningful. Such unorganized code with all that noise makes it really hard to read; I've to scroll left and right! Also, have you heard about DRY and `switch`?
      singulars
      1. POjQuery attribute selector inside a jQuery object
      1. USelclanrs
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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