相关文章:

jQuery 选择器(:last-child)详解

代码类型:

杂项:

  • 启用CSS/JS语法检查
  • 监测脚本运行错误
  • 禁止库文件重复

文档类型:

JS库文件:

手动添加:

  1. jQuery 1.11.1
 
1
<div id="n1">
2
    <div id="n2">
3
        <ul id="n3">
4
            <li id="n4" class="c">item1</li>
5
            <li id="n5" class="c">item2</li>
6
            <li id="n6">item3</li>
7
        </ul>
8
    </div>
9
    <div id="n7">
10
        <ul id="n8">
11
            <li id="n9">item1</li>
12
            <li id="n10">item2</li>
13
        </ul>
14
    </div>
15
    CodePlayer
16
</div>
xxxxxxxxxx
25
 
1
// 扩展jQuery对象，添加showTagInfo()方法
2
// 用于将jQuery对象所有匹配元素的标识信息追加到body元素内
3
// 每个元素的标识信息形如："tagName"或"tagName#id"
4
jQuery.fn.showTagInfo = function(){
5
    var tags = this.map( function(){
6
        return this.tagName + ( this.id ? "#" + this.id : "" );
7
    } ).get();
8
    $("body").append( "<br>" + tags.join("<br>") + "<br>" );
9
};
10
​
11
​
12
​
13
// 选择了id分别为n1、n7的两个元素
14
// 这里的n1是"父元素"body标签的"小儿子"；n7是"父元素"n1的"小儿子"
15
// 虽然在n1之内、n7之后有文本内容，但文本内容不算子元素，因此n7仍然是n1的"小儿子"
16
$("div:last-child").showTagInfo();
17
​
18
​
19
// 选择了id分别为n6、n10的两个元素
20
$("ul li:last-child").showTagInfo();
21
​
22
​
23
// 没有选择任何元素，返回一个空的jQuery对象。
24
// 虽然包含类名"c"的li标签有n4、n5两个元素，但它们都不是父元素的"小儿子"，因此无法匹配
25
$("li.c:last-child").showTagInfo();
​x
 
1
​