Question

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).

Sample return

<div class="row">
   <div class="category" categoryID="category_1">
      category_1
      <div categoryID="category_1">item 1</div>
      <div categoryID="category_1">item 2</div>
      <div categoryID="category_1">item 3</div>
   </div>
   <div class="category" categoryID="category_2">
      category_2
      <div categoryID="category_2">item 1</div>
      <div categoryID="category_2">item 2</div>
      <div categoryID="category_2">item 3</div>
   </div>
   <div class="category" categoryID="category_3">
      category_3
      <div categoryID="category_3">item 1</div>
      <div categoryID="category_3">item 2</div>
      <div categoryID="category_3">item 3</div>
   </div>
</div>

<div class="row">
   <div class="category" categoryID="category_1">
      category_1
      <div categoryID="category_1">item 1</div>
      <div categoryID="category_1">item 2</div>
      <div categoryID="category_1">item 3</div>
   </div>
   <div class="category" categoryID="category_2">
      category_2
      <div categoryID="category_2">item 1</div>
      <div categoryID="category_2">item 2</div>
      <div categoryID="category_2">item 3</div>
   </div>
   <div class="category" categoryID="category_3">
      category_3
      <div categoryID="category_3">item 1</div>
      <div categoryID="category_3">item 2</div>
      <div categoryID="category_3">item 3</div>
   </div>
</div>

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.

$(".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");

        });
});

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.

Thank you for your time and assistance.

Answer 1

If i understand your question correctly, something like this should work:

$(".category").live('click',function(){
       var category = $(this).attr("categoryID");
       $("[categoryID=" + category + "]").not('.category').hide();
    });