代码之家 › 专栏 › 技术社区 › Pierre-Jean Coudert

如何使用jquery获得表亲元素?

jquery javascript

Pierre-Jean Coudert · 技术社区 · 16 年前

我有一个包含许多数据行的表,我想基于第一个元素中的复选框显示或隐藏每行的一些详细信息。例如:

<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>

我希望使用jquery从复选框遍历到表亲元素(文本、选择和文本输入),并根据复选框是否被选中来切换这些元素的可见性。一个小问题是复选框被包装在一个范围内,因为它是由ASP.NET输出的。这也使得元素很难通过ID获得。

我该怎么做呢?我已经尝试了$(this).parentsuntil('tr').siblings(),但似乎我没有得到正确的元素。

任何帮助都将不胜感激。

编辑:

 $(".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');
        });

4 回复 | 直到 12 年前

Pointy 16 年前

你试过了吗?

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

如果代码在“click”处理程序或其他东西中,“this”将是您的checkbox元素。

Rob 15 年前

我知道这是一个老问题,但我偶然发现了它,并意识到我最近为此编写了一个通用函数。

使用下面的函数,您可以简单地编写 $(this).cousins() 要获取包含文本的集合,请选择和文本输入元素(其中 this 当然是您的复选框。)

/* 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)

Keith Rousseau 16 年前

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

Nis 12 年前

我刚接触StackOverflow,我不确定是否可以,但我编辑了@robjb的答案并在这里发布。全部功劳只归他。

如果有人只想选择特定的表兄弟而不是所有的表兄弟(即希望有选择器),那么我们可以使用这个修改后的@robjb'答案版本。如果 选择器 不是作为一个参数传递的,那么它将给所有的表兄弟姐妹。

(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)

上述函数的示例使用如下

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

另一个选项是使用.filter()并使用@robjb的答案。