主题:
3024-night
ambiance-mobile
ambiance
base16-dark
blackboard
cobalt
eclipse
erlang-dark
lesser-dark
mbo
mdn-like
midnight
monokai
neat
neo
night
paraiso-dark
pastel-on-dark
rubyblue
solarized
the-matrix
tomorrow-night-eighties
vibrant-ink
新窗口
视图:
左侧面板
HTML
CSS
JS
预览
F11(全屏显示选中的编辑器)
查看更多帮助信息
相关文章:
jQuery.closest() 函数详解
代码类型:
默认(HTML/CSS/JS)
HTML混合(单页)
PHP
Java
C#
C++
C
SQL
杂项:
启用CSS/JS语法检查
监测脚本运行错误
禁止库文件重复
文档类型:
HTML5
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
无
JS库文件:
无
jQuery 1.11.1
jQuery 2.1.1
jQuery 1.10.2
jQuery 1.9.1
jQuery 1.8.3
jQuery 1.7.2
jQuery 1.6.4
jQuery 1.5.2
jQuery 1.4.4
jQuery 1.3.2
jQuery 1.2.6
手动添加:
jQuery 1.11.1
<p id="n1"> <span id="n2"> <span id="n3">A</span> </span> <label id="n4">B</label> <span id="n5" class="active"> <span id="n6" class="start active">C</span> </span> <strong id="n7" class="active">D</strong> <span id="n8" class="active">E</span> </p> <p id="n9" class="active"> <span id="n10"></span> <label id="n11"></label> <span id="n12"> <span id="n13" class="start">F</span> </span> </p>
// 扩展jQuery对象,添加showTagInfo()方法 // 用于将jQuery对象所有匹配元素的标识信息追加到body元素内 // 每个元素的标识信息形如:"tagName"或"tagName#id" jQuery.fn.showTagInfo = function(){ var tags = this.map( function(){ return this.tagName + ( this.id ? "#" + this.id : "" ); } ).get(); $("body").append( tags.join("<br>") + "<br><br>" ); }; // 匹配n6元素 var $n6 = $("#n6"); // 从n6元素自身开始,逐级向上查找第一个p元素 var $p = $n6.closest("p"); $p.showTagInfo(); // #n1 // 从n6元素自身开始,逐级向上查找第一个span元素 // 由于n6自己就是span元素,因此直接返回n6 var $span = $n6.closest("span"); $span.showTagInfo(); // #n6 // 匹配所有包含类名"start"的span元素:n6、n13 var $starts = $("span.start"); // 从包含类名"active"的span元素自身开始,逐级向上查找第一个包含类名"active"的元素 // 1、从n6自身开始逐级向上查找,n6自己就是包含类名"active"的元素,因此匹配n6 // 2、从n13自身开始逐级向上查找,n9是包含类名"active"的元素,因此匹配n9 var $actives = $starts.closest(".active"); $actives.showTagInfo(); // #n6,#n9 // 从包含类名"active"的span元素自身开始,逐级向上查找第一个包含类名"active"的元素 // 并且,如果当前查找遇到n12,就停止向上查找 // 1、从n6自身开始逐级向上查找,查找符合条件的n6,因此匹配n6(查找过程中没有经过n12) // 2、从n13自身开始逐级向上查找,在找到符合条件的n9之前会先经过n12,因此无法匹配n9 var $actives = $starts.closest(".active", document.getElementById("n12")); $actives.showTagInfo(); // #n6 // 1、从n6自身开始逐级向上查找,查找符合条件的n6,因此匹配n6(查找过程中没有经过n8) // 2、从n13自身开始逐级向上查找,查找符合条件的n9,因此匹配n9(查找过程中没有经过n8) var $actives = $starts.closest(".active", document.getElementById("n8")); $actives.showTagInfo(); // #n6,#n9 // 参数( ":even", document.getElementById("n9") ) 相当于 ( "#n9 :even" ),匹配n10、n12 // 1、从n6自身开始逐级向上查找,没有一个元素为n10或n12 // 2、从n13自身开始逐级向上查找,找到符合条件的n12,因此匹配12 var $doms = $starts.closest( ":even", document.getElementById("n9") ); $doms.showTagInfo(); // #n12