Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I get to cousin elements with JQuery?

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');
        });
like image 607
Barry Avatar asked Mar 04 '10 18:03

Barry


People also ask

How can I find siblings in jQuery?

jQuery siblings() Method Sibling elements are elements that share the same parent. The DOM tree: This method traverse forward and backwards along siblings of DOM elements. Tip: Use the prev() or next() method to narrow down the search for only previous or next sibling elements.

How can I select an element by name with jQuery?

How to select an element by name with jQuery? The JavaScript getElementsByName() method can be used to select the required element and this can be passed to a jQuery function to use it further as a jQuery object.

What is $() in jQuery library?

$() = window. jQuery() $()/jQuery() is a selector function that selects DOM elements. Most of the time you will need to start with $() function. It is advisable to use jQuery after DOM is loaded fully.

What is '$' in jQuery?

The jQuery object :) From the jQuery documentation: By default, jQuery uses "$" as a shortcut for "jQuery" So, using $("#id" ) or jQuery("#id") is the same. Follow this answer to receive notifications.


2 Answers

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.

like image 144
Pointy Avatar answered Oct 04 '22 16:10

Pointy


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)
like image 29
Rob Avatar answered Oct 04 '22 17:10

Rob