Question

我想将一个函数绑定到一个名为“click”的类的所有链接，该类将提醒该链接的父div中“已检查”的所有复选框的值。我不能理解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的是获取被检查的复选框的父级，但是你是从锚点开始的（ this 指向具有的jquery对象）因此，父级是div。

在第一种情况下，您从div开始并选择要检查的子复选框。

jQuery：定位元素的父元素的复选框

2 个答案: