Q:

Is there a way to refer to all parents/children that are nested inside a div?

This function shows/hides child elements by class, but it currently requires specifying each parent element separately. How can I modify it so that it will trigger the relevant children, grandchildren, etc. in  without having to specify the id of each  and  I want to include? 
I've posted a fiddle with a working example here: http://jsfiddle.net/chayacooper/YvMwL/
$(document).ready(function() {
$('#filterOptions li a').click(function() {
    var ourClass = $(this).attr('class');
    $('#filterOptions li').removeClass('active');
    $(this).parent().addClass('active');        

    if(ourClass == 'all') {
        $('#content').children('div.item').show();
        $('#list').children('li.item').show();  
    }
    else {          
        $('#content').children('div:not(.' + ourClass + ')').hide();
        $('#list').children(':not(li.' + ourClass + ')').hide();
        $('#content').children('div.' + ourClass).show();
        $('#list').children('li.' + ourClass).show();
    }
    return false;
});
});

A:

So, there's two issues here. Firstly, the items you want to select are of different tag names, and secondly they are at different levels (divs are children and lis are grandchildren). Happily you already have a way to refer to all these items: the .item class.
So, if we use the find method together with this new selector approach, then we can modify your jsFiddle thus:
    if (ourClass == 'all')
    {
        // show all our items
        $('#content').find('.item').show();
    }
    else
    {
        // hide all elements that don't share ourClass
        $('#content').find('.item:not(.' + ourClass + ')').hide();

        // show all elements that do share ourClass
        $('#content').find('.item.' + ourClass).show();
    }

My fork is here: http://jsfiddle.net/chayacooper/WZpMh/4/

