I wound up converting a table to just divs... But, in doing that, I need to rewrite a function and I'm having some issues... I've tried to implement $(this).closest('div'), but it's not doing what I thought that would do... Still reading, but if someone knows of a solution, I'd be a happy camper...
Essentially, when I click on a link, it filters the table to only display rows with a class that matches the link's class...
This is the code, which was originally created to filter a table...
<a href="#" class="dairy">Dairy</a>
<a href="#" class="meat">Meat</a>
<a href="#" class="vegetable">Vegetable</a>
$('a').click(function(evt){
var myId = $(this).attr('class');
$('tr').each(function(idx, el){
if ($(el).hasClass(myId))
{
$(el).show();
}
else
{
$(el).hide();
}
});
});
I've since changed the table to divs:
<div id="primary-div">
<div class="child dairy">
<div class="title">Title</div>
<div class="text">Lorem ipsum</div>
</div>
<div class="child dairy">
<div class="title">Title</div>
<div class="text">Lorem ipsum</div>
</div>
<div class="child meat">
<div class="title">Title</div>
<div class="text">Lorem ipsum</div>
</div>
<div class="child vegetable">
<div class="title">Title</div>
<div class="text">Lorem ipsum</div>
</div>
</div>
Like I said, I'm still looking, but I'm being horribly unsuccess开发者_运维百科ful...
Try this: (Untested)
<a href="#" class="dairy">Dairy</a>
<a href="#" class="meat">Meat</a>
<a href="#" class="vegetable">Vegetable</a>
$('a').click(function(e){
var myId = $(this).attr('class');
$('#primary-div div.child:not(.' + myId + ')').hide();
$('#primary-div div.child.' + myId).show();
return false;
});
$('a').click(function(evt){
var myId = $(this).attr('class');
$('div#primary-div div.child').hide();
$('div#primary-div div.'+myId).show();
});
This should do it.
Just for kicks, here is an optimized version that utilizes jQuery chaining and the end()
method:
$('a').click(function(e){
$("div#primary-div > div")
.not('.' + this.className).hide().end()
.filter('.' + this.className).show();
return false;
});
精彩评论