1

我有：

<table>
 <tr>
  <td><input type='checkbox' id='a'>Select all/none</td>
  <td><input type='checkbox' id='b'>Option 1</td>
  <td><input type='checkbox' id='c'>Option 2</td>
  <td><input type='checkbox' id='d'>Option 3</td>
 </tr>
</table>

$("#a").parentsUntil("table").find(":checkbox") 给了我 { abcd }，但是

$("#b").parentsUntil("table").find(":checkbox") 给了我 { bacd }。

如果选择了任何复选框，我想要的是找到第一个复选框。实现这一目标的最佳方法是什么？谢谢。

4

4 回答 4

2

这很简单。

首先，您应该知道这种行为只发生在 v1.9.1 以下的 jquery 中。

.parentUntil()遍历每个父母，直到找到选择器。所以你的代码是这样的：

第1步

做$('b').parent()

第2步

找到每个:checkbox（td的父级b）并且只找到b。然后他把它放在数组中

第 3 步

做$('b').parent().parent()

第4步

找到每个:checkbox(tr的父级的父级b) 并找到a,b,c,d。然后他将它放入数组a,c,d中，因为b它已经在数组中。

第 5 步

做$('b').parent().parent().parent()

第 6 步

您在.parentUntil()(table) 中点击了选择器，因此它停止循环通过父母。

ps：是伪代码，$('b') 不是选择器。

要查看是否未选中：

if($(this).closest('tr').find(':checkbox').not(':checked, :first').length){
    alert('one is unchecked');
}

小提琴：http: //jsfiddle.net/AuFgE/1/

于 2013-05-28T13:52:18.967 回答
1

如果你想确保在不同版本的 jQuery 中以正确的顺序获取复选框，你可以使用.closest()，它返回一个结果来锚定.find()：

$(this).closest('tr').find(':checkbox').eq(0);

假设这$(this)是勾选的复选框。第一项将始终是a:)

于 2013-05-28T14:08:38.673 回答
1

选择元素的两种方式都将返回相同的结果，这是一个小提琴：http: //jsfiddle.net/BQKyc/

var listA = $(".a").parentsUntil("table").find(":checkbox");
var listB = $(".b").parentsUntil("table").find(":checkbox");

function iterator () {
    console.log(this);
}

console.log("List A");
listA.each(iterator);
console.log("List B");
listB.each(iterator);

这就是他们选择相同元素的原因：

首先，您选择输入 a 或输入 b。接下来，选择 a 或 b 的所有父项，直到该表，这意味着 td 和 tr 按该顺序排列。接下来，您选择 td 和 tr 的所有子元素（同样，按该顺序），这些子元素是已检查的输入。此时，jQuery 使用$.unique来确保集合是唯一的并按 dom 顺序排列，这会将它们按正确的顺序放回（最后一部分是在 1.9 中添加的，以前的版本只是使其唯一，不要按 dom 顺序放回.)

您看到不同结果的原因是由于旧版本的 jQuery 中的错误。较新的版本现在将集合传递给 $.unique 而不是自己检查唯一检查/ dom 重新排序。

在旧版本中使用.closest('tr')而不是.parentsUntil('table')通过仅选择一个元素而不是 2 来修复此问题。http://jsfiddle.net/BQKyc/1/

于 2013-05-28T14:13:09.087 回答
1

根据您的评论：

我想在“列表”顶部找到第一个复选框对象。我的最终目标是在其他任何一个未勾选的情况下取消勾选。

试试这个：

if($('table :checkbox:not(:checked):not(:first)').length)
    $('table :checkbox:first').prop("checked",false);
于 2013-05-28T14:18:23.460 回答