Databases
StackOverflow2013
Postsdbo
POHow to hide all elements with a specific attribute set?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to hide all elements with a specific attribute set?
    text
    copied!<p>I have a series of items being inserted into my html document via ajax request from a php document. The data that is returned consists of a bunch of div elements with custom attributes set so that I may be able to tell which div elements belong to which category of items that have been returned. I would like to be able to click on the category name and hide all elements that have the custom attribute (which is set to the category name).</p> <p>Sample return</p> <pre><code>&lt;div class="row"&gt; &lt;div class="category" categoryID="category_1"&gt; category_1 &lt;div categoryID="category_1"&gt;item 1&lt;/div&gt; &lt;div categoryID="category_1"&gt;item 2&lt;/div&gt; &lt;div categoryID="category_1"&gt;item 3&lt;/div&gt; &lt;/div&gt; &lt;div class="category" categoryID="category_2"&gt; category_2 &lt;div categoryID="category_2"&gt;item 1&lt;/div&gt; &lt;div categoryID="category_2"&gt;item 2&lt;/div&gt; &lt;div categoryID="category_2"&gt;item 3&lt;/div&gt; &lt;/div&gt; &lt;div class="category" categoryID="category_3"&gt; category_3 &lt;div categoryID="category_3"&gt;item 1&lt;/div&gt; &lt;div categoryID="category_3"&gt;item 2&lt;/div&gt; &lt;div categoryID="category_3"&gt;item 3&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="category" categoryID="category_1"&gt; category_1 &lt;div categoryID="category_1"&gt;item 1&lt;/div&gt; &lt;div categoryID="category_1"&gt;item 2&lt;/div&gt; &lt;div categoryID="category_1"&gt;item 3&lt;/div&gt; &lt;/div&gt; &lt;div class="category" categoryID="category_2"&gt; category_2 &lt;div categoryID="category_2"&gt;item 1&lt;/div&gt; &lt;div categoryID="category_2"&gt;item 2&lt;/div&gt; &lt;div categoryID="category_2"&gt;item 3&lt;/div&gt; &lt;/div&gt; &lt;div class="category" categoryID="category_3"&gt; category_3 &lt;div categoryID="category_3"&gt;item 1&lt;/div&gt; &lt;div categoryID="category_3"&gt;item 2&lt;/div&gt; &lt;div categoryID="category_3"&gt;item 3&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I am using jquery to handle most of the javascript function so naturally I would am using code like below when working with the data that is dynamically added to the dom.</p> <pre><code>$(".skillCategory").live({ mouseenter: function(){ $(this).css('background-color', 'white'); }, mouseleave: function(){ $(this).css('background-color', '#393939'); } }); $(".skillCategory").live('click',function(){ var title = $(".skillCategory").attr("categoryID"); }); }); </code></pre> <p>I am trying to be able to hide a category and all of the items in which belong to it as determined by the "categoryID" attribute.</p> <p>Thank you for your time and assistance.</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