使用属性过滤器的jQuery closest方法

Question

jQuery 1.5.1支持closest方法中的属性选择器吗？

给定以下结构，el代表值为513的复选框，我正在尝试向上查找并检查值为0的祖先复选框。

$(el).closest("input[value='0']")[0].checked = true;

但是选择器没有返回任何内容。

我错过了什么傻瓜问题吗？

---

编辑

唉，所以值为0的复选框不是el的祖先，只是ul祖先的兄弟。我用下面的代码解决了这个问题：

$(el).closest("ul").siblings("input[value='0']")[0].checked = true;

但是有没有更简洁的方法来获取它呢？

- Adam Rackis

---

哇，我简直不敢相信你用jQuery和javascript这些标签来提问... - gdoron

你不是这里的JavaScript-jQuery大师吗？ - gdoron

LOL - 大师？一点也不是。我还可以，但这里有很多人比我更有知识 :) - Adam Rackis

所以我猜你拥有的那个JavaScript金徽章是一个错误...你是一个谦虚的人。 - gdoron

@gdoron - 记住，声望、回答和徽章在很大程度上代表社区对你的信任度以及对 Stack Overflow 的热爱程度 :) 我对 JavaScript 和 jQuery 有一定的了解，但这是一个愚蠢的周六晚上犯下的错误，而且有很多人比我更懂，但却声望较低。"am not i am" 是一个很好的例子。 - Adam Rackis

Answer 1

.closest() 方法 支持属性选择器，就像其他任何 jQuery 方法一样（虽然我不确定你提到的是哪个具体版本的 jQuery），但问题在于 .closest() 不仅会查找通常意义下的相邻元素，还会向上查找祖先元素。你正尝试选择一个输入元素，该元素并非起始元素的祖先元素。（由于输入元素不能包含其他元素，它们永远不可能是任何元素的祖先元素……）

你应该先选择目标复选框的父 li 元素，然后再进行操作：

$(el).closest('li:has(input[value="0"])')
     .find('input[value="0"]').prop("checked",true);

示例：http://jsfiddle.net/Vpzyj/

当然，如果您能够在顶级菜单项中添加一个类，就不需要使用“：has”命令，您只需这样说：

$(el).closest('li.topMenu').find('input[value="0"]').prop("checked",true);

- nnnnnn

---

+1 感谢你的解释，但是我不能使用 prop，因为我使用的是 jQuery 1.5。你能否想到比我编辑更好的方法？ - Adam Rackis

根据我的编辑，我会给顶级 li 加一个 class 并选择它，但实际上你的编辑（当时我还没有看到）更好，因为它不需要改变标记。 .prop() 部分并不是我回答的关键部分，我相信你知道可以使用 .attr("checked","checked") 或者当然可以坚持 [0].checked = true 如果你确信会有匹配的元素。我忘记在我的演示中设置正确的 jQuery 版本，但这里有一个更新版本，可以与 1.4.4 一起使用：http://jsfiddle.net/Vpzyj/2/ - nnnnnn

谢谢 - 你没有必要为我编写一个小把戏 :) - Adam Rackis

不用客氣。實際上，當我第一次回答這個問題時，我並沒有注意到是誰在問 - 如果我當時注意到了你的名字，我就會知道你可以完全理解而不需要進行實驗。現在我知道是你在問，根據gdoron上面的評論，我有些驚訝... - nnnnnn

是啊 - 或许周六晚上有这么多的干扰，我不应该工作。 - Adam Rackis

Answer 2

Check for: http://api.jquery.com/closest/

.closest( selector ) // version added: 1.3

- DraganS

Answer 3

我认为你不需要使用 [0]，因为 .closest 只返回第一个找到的元素，而 parents() 则会返回多个元素。

$(el).closest("input[value='0']").prop("checked") = true;

这是我更喜欢的方法。假设您想在选中513框时检查"value 0"复选框。

编辑：抱歉，我看错了。实际上，您需要尝试获取<\li>标签，然后获取底层复选框。您实际上正在寻找不是直接父级的复选框。

编辑2：您意识到您的编辑不起作用吗？等等...它会...你使用的是siblings而不是children，我的错误。

编辑3：如何使用以下内容：

$(el).parents().get(':eq(2)').children(':first-child');

或者我们不假设布局是固定的吗？

- Pluckerpluck

---

我需要 [0]，因为我正在检查底层 DOM 元素的 checked 属性。 - Adam Rackis

Answer 4

最接近的检查{{link1：在DOM树上向上}}而不是在同一级别上。

- PeeHaa

---

我意识到在发布后不久，耐心地等待着回答的洪流告诉我这一点 :) - Adam Rackis

@AdamRackis 哈哈，这种事情经常发生 :-) - PeeHaa

Answer 5

关于您的问题：是的，它可以（http://api.jquery.com/closest/）。

您的代码无法正常工作，因为closest()会沿着DOM树向上查找，在您的情况下，它需要向上和向下查找，因为您的复选框0不是复选框513的祖先。

- Bruno Silva