jQuery > 选择器

Question

在此示例（正在运行）中，单击按钮时，该部分将切换为可见/不可见。 很好，但是第 2 行中的代码实际上在做什么？ 我找到了对 :eq(0) 部分 here on jQuery.com 的引用，但 '>' 我不知道。在萤火虫下，“>”是否存在似乎并不重要。

 $("#btnHideShow").click(function() {
                 $("> :eq(0)", "#toggleGrid").toggle("blind");
                 if ($("#btnHideShow").val() == "Hide List") {
                     $("#btnHideShow").val('Show List');
                 } else {
                     $("#btnHideShow").val('Hide List');
                 };
             });

Answer 1

据我所知，您使用 > 指定直接子代，而不是任何后代。

给定：

<div class="parent">
  <ul class="child">
    <a href="#">foo</a>
    <a href="#">bar</a>
  </ul>
</div>

.parent a 将匹配这两个链接，但 .parent > a 不会，因为它们不是直接后代。同样，.parent > .child 也会匹配，.child > a 也会匹配。

在您提供的代码中，您匹配的是#toggleGrid 的直接子代。如果您只有直系子女，则无论是否包含 >，您可能不会注意到差异 - 但您可能需要稍后再具体说明。

我总是觉得尝试插入其他人的代码是有问题的 - 你试图理解它是一件好事:)

如果您需要更多信息，请查看this article。

Answer 2

它是被引用元素的直接子元素的child selector。该行等效于（并且写得更好，IMO）：

$('#toggleGrid > :first').toggle('blind');

Answer 3

> 是一个子选择器：

5.6 子选择器 当元素是某个元素的子元素时，子选择器匹配。子选择器由两个或多个以“>”分隔的选择器组成。

示例：

以下规则设置作为 BODY 子级的所有 P 元素的样式：

body > P { line-height: 1.3 } 示例：

以下示例结合了后代选择器和子选择器：

div ol>li p 它匹配作为 LI 的后代的 P 元素； LI 元素必须是 OL 元素的子元素； OL 元素必须是 DIV 的后代。请注意，“>”组合符周围的可选空格已被省略。

Answer 4

根据 SelectORacle，前面没有选择器的 > 会选择任何其他元素的子元素。 因此，选择器看起来像是在“toggleGrid”元素下找到的任何元素的第一个子元素。

SelectORacle 在这里：http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py 但请注意，它不理解 jQuery-isms。

edit — 实际上，虽然我会在此处留下 SelectORacle 链接，但我错了，因为我混淆了 ":eq(0)";它与 ":first-child" 不一样。因此@tv 等人是正确的，这只是“toggleGrid”下的孩子的第一件事。