jQuery - 如何根据子项的属性选择父项？

Question

如何根据孩子的属性选择父母？

我想选择一个div：

有一个带收音机的孩子：已选中

<div> <input id="1" type="radio"/> </div>
<div> <input id="2" type="radio"/> </div>

例如。

$('div radio:checked').click(function(){
     $(*** div parent based on radio:checked ***).css({'background':'#F00'});
});

Answer 1

closest()

$('div radio:checked').click(function(){
    $(this).closest('div').css({'background':'#F00'});
});

如果您想要最近的父母＆＃39; div，即使是几级。

parent()

$('div radio:checked').click(function(){
    $(this).parent('div').css({'background':'#F00'});
});

如果你想要直接父母

有趣的是，您可以使用:has来执行某种反向查找选择器，例如

$('div:has(radio:checked)').click(function(){
    $(this).css({'background':'#F00'});
});

Answer 2

尝试：

$('div radio:checked').click(function(){
 $(this).parent().css({'background':'#F00'});
});

<强>更新

＆＃39; div电台：已选中＆＃39; 无法在您的代码中使用，您可以使用：

$('div input[type=radio]').click(function () {
 $(this).parent().css({'background': '#F00'});
});