如何使用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:

<table>
  <tr>
    <td><span class="aspnetweirdness"><input type=checkbox></span></td>
    <td>Text Text Text</td>
    <td><select /></td>
    <td><input type=text></td>
  </tr>
</table>

I'm looking to traverse from the checkbox to the cousin elements (the text, the select, and the text input) with jquery and toggle the visibility on those elements based on whether the checkbox is checked. One small snag is that the checkbox is wrapped in a span, since this is being output by asp.net. That also makes the elements harder to get at by id.

How would I go about doing this? I've tried $(this).parentsUntil('tr').siblings(), but it doesn't seem like i get the right elements.

Any help would be appreciated.

EDIT:

 $(".crewMemberTable input:checkbox").toggle(function() {
            $(this).closest('tr').find('select, input:not(:checkbox)').fadeIn();
            $(this).closest('tr').find('label').css('font-weight', 'bold');
        }, function() {
            $(this).closest('tr').find('select, input:not(:checkbox)').fadeOut();
            $(this).closest('tr').find('label').css('font-weight', 'normal');
        });

Answer 1

Well have you tried:

$(this).closest('tr').find('td:not(:first-child)')

where "this" would be your checkbox element if the code were in a "click" handler or something.

Answer 2

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)

Answer 3

$('input[type=checkbox]').click(function() {
  $(this).closest('td').siblings().find('select,input').hide();
});

Answer 4

I am new to stackoverflow and I'm not sure if I can or not, but I edited the answer of @robjb and posting here. Full credit goes to him only.

In case if anyone wants to select only particular cousins and not all cousins (ie wants to have selector), then we can use this modified version of @robjb 's answer. If selector is not passed as an argument then it will give all cousins.

(function($) {
$.fn.cousins = function(selector) {
    var cousins;
    this.each(function() {
        var auntsAndUncles = $(this).parent().siblings();
        auntsAndUncles.each(function() {
            if(cousins == null) {
                if(selector)
                    cousins = auntsAndUncles.children(selector);
                else
                    cousins = auntsAndUncles.children();
            }
            else {
                if(selector)
                    cousins.add( auntsAndUncles.children(selector) );
                else
                    cousins.add( auntsAndUncles.children() );
            }
        });
    });
    return cousins;
    }
})(jQuery)

Example use of the above function would be as

$(clickedObj).cousins('.singleWheel');

The other option would be to use .filter() and use @robjb's answer.