jQuery-筛选器

jQuery筛选器

筛选器一般用于对选择器选中的标签进行再次筛选。

parent 父标签

HTML代码：

<div>
    <p>Hello</p>
    <p>Hello</p>
</div>

jQuery代码：

$("p").parent()

结果：

[<div><p>Hello</p><p>Hello</p></div> ]

children 所有子标签

HTML代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代码：

$("div").children()

结果：

[ <span>Hello Again</span> ]

next 下一个兄弟标签

HTML代码：

<p>Hello</p>
<p>Hello Again</p>
<div>
    <span>And Again</span>
</div>

jQuery代码：

$("p").next()

结果：

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

prev 上一个兄弟标签

HTML代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代码：

$("p").prev()

结果：

[ <div><span>Hello Again</span></div> ]

siblings 所有兄弟标签

HTML代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代码：

$("div").siblings()

结果：

[ <p>Hello</p>, <p>And Again</p> ]

find 子孙中查找标签

HTML代码：

<p>
    <span>Hello</span>, how are you?
</p>

jQuery代码：

$("p").find("span")

结果：

[ <span>Hello</span> ]

first 匹配的第一个标签

HTML代码：

<ul>    
    <li>list item 1</li>    
    <li>list item 2</li>    
    <li>list item 3</li>    
    <li>list item 4</li>    
    <li>list item 5</li>
</ul>

jQuery代码：

$('li').first()

结果：

[ <li>list item 1</li> ]

last 匹配的最后一个标签

HTML代码：

<ul>    
    <li>list item 1</li>    
    <li>list item 2</li>    
    <li>list item 3</li>    
    <li>list item 4</li>    
    <li>list item 5</li>
</ul>

jQuery代码：

$('li').last()

结果：

[ <li>list item 5</li> ]