jQuery：将一个元素的父项的选中复选框作为目标

Question

我想将一个函数绑定到一个名为'click'的类的所有链接上，该类将提醒该链接的父div中'checked'的所有复选框的值。我一定不明白jQuery父功能是如何工作的，因为我期望下面的两个JS代码做同样的事情，只有第二个更灵活..但第一个（特定目标）工作，而第二个JS例子不'吨。

任何指针，我做错了会很棒！

HTML：

<div id="wrapper"> 
<ul> 
    <li><input type="checkbox" name="blue" value="blue" /></li> 
    <li><input type="checkbox" name="red" value="red" /></li> 
    <li><input type="checkbox" name="green" value="green" /></li> 
</ul> 

<a href="#" class="click">Submit</a> 
</div> 

工作JS：

$('.click').click(function() { 

    var colors = []; 

    $('#wrapper :checkbox:checked').each(function(i){       

     alert($(this).val()); 

     colors[i] = $(this).val(); 

    }); 

    return false; 

}); 

不工作JS：

$('.click').click(function() { 

    var colors = []; 

    $(this).parent(':checkbox:checked').each(function(i){       

     alert($(this).val()); 

     colors[i] = $(this).val(); 

    }); 

    return false; 

}); 

Answer 1

你的代码的第二块改成这样，它应该工作：

$('.click').click(function() { 

    var colors = []; 

    $(this).parent().find(':checkbox:checked').each(function(i){       

     alert($(this).val()); 

     colors[i] = $(this).val(); 

    }); 

    return false; 

}); 

父函数通过搜索祖先并查找与提供的字符串匹配的元素。如果没有提供字符串，则返回您的直接祖先。 parent()和find('...')的组合应该做你想做的事情。

如果你想保证你抓住了包含div，你也可以使用.parent('div').find(':checkbox:checked')。

Answer 2

在第二个功能，什么你告诉jQuery是获取父那就是被选中一个复选框，但你从锚（这指向jQuery对象具有被clciked锚开始）因此父母是div。

在第一种情况下，您从div开始并选中被选中的子复选框。