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：

：first-of-type CSS伪类在其父元素的子元素列表中表示其类型的第一个兄弟。

D是其父元素的唯一子元素span。

您可以通过明确要求div的孩子来解决这个问题：

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

Answer 2

根据jQuery的documentation，“：first-of-type选择器匹配在文档树中没有其他元素的元素与同一个父元素和相同的元素名称。”

给出

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

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

以下是否适合您？这应输出AC

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

我已经分叉了一个新的fiddle

第一类 - 它是如何工作的？

2 个答案: