How do I get to cousin elements with JQuery?

Question

I have a table with many rows of data, and I want to show or hide some of the details on each row based on a checkbox in the first element. For example:

<         


        

Answer 1

I know this is an old question, but I just stumbled across it and realized I recently wrote a generic function for this.

Using the function below you could simply write $(this).cousins() to get a collection containing the text, select, and text-input elements (where this is of course your checkbox.)

/* See http://addictedtonew.com/archives/414/creating-a-jquery-plugin-from-scratch/
 * Used like any other jQuery function:
 *        $( selector ).cousins()
 */
(function($) {
    $.fn.cousins = function() {
        var cousins;
        this.each(function() {
            var auntsAndUncles = $(this).parent().siblings();
            auntsAndUncles.each(function() {
                if(cousins == null) {
                    cousins = auntsAndUncles.children();
                }
                else cousins.add( auntsAndUncles.children() );
            });
        });
        return cousins;
    }
})(jQuery)