相关文章:

jQuery 选择器(ancestor descendant)详解

代码类型:

杂项:

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

文档类型:

JS库文件:

手动添加:

  1. jQuery 1.11.1
10
 
1
<div id="n1">
2
    <p id="n2" class="test">
3
        <span id="n3" class="a">Hello</span>
4
    </p>
5
    <p id="n4" class="detail">
6
        <span id="n5" class="b codeplayer">World
7
            <span id="n6" class="c">365mini.com</span>
8
        </span>
9
    </p>
10
</div>
xxxxxxxxxx
21
21
 
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( tags.join("<br>") + "<br><br>" );
9
};
10
​
11
​
12
// 选择了id分别为n2、n4的2个元素
13
$("#n1 p").showTagInfo();
14
​
15
// 匹配p元素的所有后代span元素
16
// 选择了id分别为n3、n5、n6的3个元素
17
$("p span").showTagInfo();
18
​
19
// 匹配id为n1的元素的后代中
20
// 选择了id为n6的一个元素
21
$("#n1 p.detail span.c").showTagInfo();
​x
1
 
1
​