Question

我有：

<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”）给了我{a b c d}，但是

$（“＃b”）。parentsuntil（“table”）。find（“：checkbox”）给了我{b a c d}。

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

Answer 1

这很简单。

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

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

第1步

做$('b').parent()

第2步

查找:checkbox td的父b的每个b，然后才能找到$('b').parent().parent()。然后他把它放在数组中

第3步

做:checkbox

第4步

查找tr的{{1}} b的父级的父级a,b,c,d，找到a,c,d。然后他将它放在数组b中，因为$('b').parent().parent().parent()已经在数组中。

第5步

做.parentUntil()

第6步

你点击了if($(this).closest('tr').find(':checkbox').not(':checked, :first').length){ alert('one is unchecked'); }（表格）中的选择器，所以它停止了通过父母的循环。

P.s：它是伪代码，$（'b'）不是选择器。

要查看是否取消选中：

{{1}}

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

Answer 2

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

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

假设$(this)是勾选的复选框。第一项始终是a但是：）

Answer 3

选择元素的两种方式都会返回相同的结果，这里有一个小提琴：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而不是自己检查唯一的check / dom重新排序。

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

Answer 4

发表评论：

我想在“列表”的顶部找到第一个复选框对象。我的如果任何其他人都没有被解雇，最终的目的就是取消它。

试试这个：

if($('table :checkbox:not(:checked):not(:first)').length)
    $('table :checkbox:first').prop("checked",false);

parentUntil返回的对象的顺序是什么？

4 个答案: