jQuery子元素过滤选择器

:first-child

描述: 在每个 ul 中查找第一个 li

HTML代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码

$("ul li:first-child")

结果

[ <li>John</li>, <li>Glen</li> ]

:first-of-type

描述: 查找作为父元素的span类型子元素中的"长子"的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代码

$("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>]

:last-child

描述: 在每个 ul 中查找最后一个 li

HTML代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码

$("ul li:last-child")

结果

[ <li>Brandon</li>, <li>Ralph</li> ]

:last-of-type

描述: 在每一个匹配的<p>中找到最后一个span

HTML代码

<p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</p>

jQuery代码

$("p:last-of-type")

结果

[ <span>3</span> ]

:nth-child

描述: 在每个 ul 查找第 2 个li

HTML代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码

$("ul li:nth-child(2)")

结果

[ <li>Karl</li>,   <li>Tane</li> ]

:nth-last-child

描述: 在每个匹配的ul中查找倒数第二个li

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

jQuery代码

$("ul li:nth-last-child(2)");

结果

[ <li>3</li> ]

:nth-last-of-type

描述: 在每个匹配的ul中查找倒数第二个li

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

jQuery代码

$("ul li:nth-last-of-type(2)");

结果

[ <li>3</li> ]

:nth-of-type

描述: 查找每个span，这个 span 是其所有兄弟span元素中的第二个元素。

HTML代码

<div>  
    <span>John</span>  
    <b>Kim</b>  
    <span>Adam</span>  
    <b>Rafael</b>  
    <span>Oleg</span>
</div>
<div>  
    <b>Dave</b>  
    <span>Ann</span>
</div>
<div>  
    <i>
        <span>Maurice</span>
    </i>  
    <span>Richard</span>  
    <span>Ralph</span>  
    <span>Jason</span>
</div>

jQuery代码

$("span:nth-of-type(2)");

结果

[ <span>Adam</span>, <span>Ralph</span> ]

:only-child

描述: 在 ul 中查找是唯一子元素的 li

HTML代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>

jQuery代码

$("ul li:only-child")

结果

[ <li>Glen</li> ]

:only-of-type

描述: 改变每一个按钮的文字，并且加一个边框，这些按钮的父元素只有这个按钮子元素

HTML代码

<div>
    <button>Sibling!</button>
    <button>Sibling!</button>
</div>
<div>
    <button>Sibling!</button>
</div>
<div>None</div>
<div>
    <button>Sibling!</button>
    <span>Sibling!</span>
    <span>Sibling!</span>
</div>
<div>
    <button>Sibling!</button>
</div>

jQuery代码

$("button:only-of-type").text("Alone").css("border", "2px blue solid");

结果

摘自 jQuery API 文档