加载中...

: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>

运行一下


还没有评论.