首创 - 它是如何工作的？

Question

我的结构如下：

<div>
    <input type="radio" value="A" />
    <input type="radio" value="B" />
</div>
<div>
    <input type="radio" value="C" />
    <input type="radio" value="D" />
</div>

我想选择每个 div 中的第一个单选按钮，所以我这样做：

$('div :radio:first-of-type')

这让我回到了 AC...但是，我最近需要像这样标记其中一个单选按钮：

<div>
  <input type="radio">C
  <span><input type="radio">D</span>
</div>

现在参考资料让我回到了 ACD。所以我有两个问题：

1) 为什么会发生这种情况，即它究竟是如何工作的？和 2) 我怎样才能让代码像以前一样只带回 AC？

这是一个演示问题的 JsFiddle：http://jsfiddle.net/kh3js9ts/

提前致谢

Answer 1

引用 MDN：

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

D 是其 parent 元素中唯一的 child，即 span.

您可以通过明确要求 div:

的 children 来解决这个问题

$('div > :radio:first-of-type')

Answer 2

根据 jQuery 的 documentation、"The :first-of-type selector matches elements that have no other element with both the same parent and the same element name coming before it in the document tree."

给定

<span><input type="radio">D</span>

很明显，在文档树中没有其他元素具有相同的父级（跨度）和相同的元素名称（输入）。

以下内容对您有用吗？这应该输出 AC

$('.not').find(':radio:first').each(function() { s += $(this).val(); });

我分叉了一个新的fiddle

首创 - 它是如何工作的？

first-of-type - how does it work?

jquery

jquery-selectors