:first-of-type1.9+

概述 first-of-type selector

返回值：jQuery

描述：选择所有相同的元素名称的第一个兄弟元素。

V : 1.9jQuery( ":first-of-type" )

:first-of-type 选择器匹配元素，在文档树中，相同的父元素并且在其他相同的元素名称之前。

实例

HTML 代码:

<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>
</div>

jQuery 代码:

$("span:first-of-type");

结果:

//n4虽然不是n2的第一个子元素，但它是n2所有span类型子元素中的第一个，因此可以匹配
[<span id="n4">span1</span>,<span id="n8" class="abc">span1</span>]

HTML 代码:

<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>
</div>

jQuery 代码:

$(".abc:first-of-type");

结果:

//.abc可以匹配id分别为n2、n5、n8的3个元素，n2是n1所有div类型子元素中的第一个，n8是n7所有span类型子元素中的第一个，但n5不是n2所有span类型子元素中的第一个，因此不能匹配n5。
[<div id="n2" class="abc">,<span id="n8" class="abc">span1</span>]

实例

在每一个匹配的div中查找第一个span，给它添加一个类。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first-of-type demo</title>
  <style>
  span.fot {
    color: red;
    font-size: 120%;
    font-style: italic;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <b>Nobody,</b>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo</span>
</div>
 
<script>
$( "span:first-of-type" ).addClass( "fot" );
</script>
 
</body>
</html>

运行一下

:first-of-type1.9+

概述 first-of-type selector

V : 1.9jQuery( ":first-of-type" )

实例

HTML 代码:

jQuery 代码:

结果:

HTML 代码:

jQuery 代码:

结果:

实例