Using Jquery to filter div in bootstrap framework

Edited for more detail:

I am designing a website using the twitter bootstrap framework. I want to filter out a couple div using jquery, so I did a research online and here is what I got.

First comes the Filter button list (inside a div) with some css styling the ul list.

<div class="row">
<div class="col-lg-8">
<ul id="filterOptions">
  <li class="active"><a href="#" class="all">All</a></li>
  <li><a href="#" class="UX">UX</a></li>
  <li><a href="#" class="UI">UI</a></li>
  <li><a href="#" class="Graphic">Graphic</a></li>
  <li><a href="#" class="Design">Design</a></li>
</ul>

Then several nested div

  <div class="row">
  <div id="ourHolder">   
  <div class="col-lg-6 UX">
  <img src="img/DTB1.png">
   </div>


  <div class="col-lg-6 UI">
  <img src="img/EDB1.png">
  </div>

  <div class="col-lg-6 Graphic">
  <img src="img/STB1.png">
  </div>

  <div class="col-lg-6 Design">
  <img src="img/MOV1.png">
  </div>

  </div>
  </div>

Then the Jquery

$(document).ready(function() {

 $('#filterOptions li a').click(function() {

var ourClass = $(this).attr('class');

$('#filterOptions li').removeClass('active');


$(this).parent().addClass('active');

if(ourClass == 'all') {

  $('#ourHolder').children('div.item').show();
}
else {

  $('#ourHolder').children('div:not(.' + ourClass + ')').hide();

  $('#ourHolder').children('div.' + ourClass).show();

}

return false;

  });

});

Somehow none of these buttons are working for me, if anyone can give me a hand here to tell me what am I missing, it will be very helpful!

Thank you

Answers


I put your code into a fiddle and it seems to work fine: http://jsfiddle.net/xaNVL/

The problem might be that your nested divs aren't the immediate children of #ourHolder. In that case you can try to use .find() instead of .children().

<div id="ourHolder">
<div class="col-lg-6 UX">
    <img src="img/DTB1.png">
</div>
<div class="col-lg-6 UI">
    <img src="img/EDB1.png">
</div>
<div class="col-lg-6 Graphic">
    <img src="img/STB1.png">
</div>
<div class="col-lg-6 Design">
    <img src="img/MOV1.png">
</div>


Need Your Help

Thumbnail storage strategy

objective-c ios thumbnails photo-gallery

I am working on a portion of an app that requires a "Photos" type presentation of multiple thumbnail images. The full size images are quite large, and generating the thumbnails every time is takin...