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

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.