jQuery中closest()函数用法实例

本文实例讲述了jQuery中closest()函数用法。分享给大家供大家参考。具体分析如下：

此函数从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。
closest()函数会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

语法结构一:


代码如下:

$(selector).closest(expr, context)

参数列表:

参数 描述
expr 用以过滤元素的表达式
context 可选。作为待查找的 DOM 元素集或者文档。

实例代码:

实例一:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>closest()函数-我们</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".father p").closest("div").css("color","green");
})
</script>
</head>
<body>
<div class="father">
  <div class="children"> 我是div
    <p>我是孙子p</p>
  </div>
  <p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
</body>
</html>

实例二:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>closest()函数-我们</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#children p").closest("#father",document.getElementById("children")).
  css("border","1px solid red");
})
</script>
</head>
<body>
<div id="father">
  <div id="children">
    <p>我是孙子p</p>
  </div>
  <p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
</body>
</html>

由于id为father的div并没有在id为children的div之内，所以并不能将其边框设置为红色。

语法结构二:


代码如下:

$(selector).closest(element)

参数列表:

参数 描述
element 用于匹配元素的DOM元素或者jQuery元素。

实例代码:

实例一:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>closest()函数-我们</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#children p").closest(document.getElementById("children")).
  css("border","1px solid red");
})
</script>
</head>
<body>
<div id="father">
  <div id="children">
    <p>我是孙子p</p>
  </div>
  <p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
</body>
</html>

实例二:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>closest()函数-我们</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#children p").closest($("#children")).css("border","1px solid red");
})
</script>
</head>
<body>
<div id="father">
  <div id="children">
    <p>我是孙子p</p>
  </div>
  <p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery通过closest选择器修改上级元素的方法

    本文实例讲述了jquery通过closest选择器修改上级元素的方法.分享给大家供大家参考.具体如下: 这段代码演示了jQuery通过closest选择器获取上一级的元素,然后修改其text()内容. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>

  • jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 语法: .closest(selector) 参数selector为字符串值,包含匹配元素的选择器表达式. 如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象..parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历.两者之间的差异尽管微妙,却很重要:

  • jquery中的查找parents与closest方法之间的区别

    一.返回值 前者可以返回多个元素 或者只能返回0个或者1个 二.停止的时间不同 前者是所有的上级元素即一直到根一般是body  后者是知道发现为止,发现一个就停止了 三.开始的元素不同 前者是从父元素开始  后者是从自身开始的 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方

  • JQuery.closest(),parent(),parents()寻找父结点

    JQuery.closest(),parent(),parents()寻找父结点

    HTML代码,测试地址:jQuery 遍历 - closest() 方法 ------我粘代码上来,在页面上会自动隐藏(会显示一下)!谁能教我这是肿么回事! 1.通过item-1查找 level-3(查找直接上级) 复制代码 代码如下: $('li.item-1').closest('ul') $('li.item-1').parent() $('li.item-1').parents().eq(0) 2.通过item-1查找 level-2(通过选择器查找父元素) 复制代码 代码如下: $('

  • jQuery中closest()函数用法实例

    本文实例讲述了jQuery中closest()函数用法.分享给大家供大家参考.具体分析如下: 此函数从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素. closest()函数会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素.如果什么都没找到则返回一个空的jQuery对象. 语法结构一: 复制代码 代码如下: $(selector).closest(expr, context) 参数列表: 参数 描述 expr 用以

  • jQuery中nextUntil()方法用法实例

    本文实例讲述了jQuery中nextUntil()方法用法.分享给大家供大家参考.具体分析如下: 此函数查找指定元素之后所有的同辈元素,直到遇到匹配的那个元素为止,但不包括此匹配的元素. 语法结构一: 复制代码 代码如下: $(selector).closest(expr, filter) 参数列表: 参数 描述 expr 用于筛选匹配元素的表达式. filter 可选.用于筛选nextUntil()函数通过expr表达式取得的jquery元素集合. 实例代码: 实例一: 复制代码 代码如下:

  • jQuery中die()方法用法实例

    本文实例讲述了jQuery中die()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除所有通过live()方法向指定元素添加的一个或多个事件处理程序. 语法结构: 复制代码 代码如下: $(selector).die(type,function) 参数列表: 参数 描述 type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. function 定义当事件发生时运行的函数. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中data()方法用法实例

    本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • jQuery中each()方法用法实例

    本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

  • jQuery中offset()方法用法实例

    本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码 代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta char

  • jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

  • jQuery中first()方法用法实例

    本文实例讲述了jQuery中first()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素集合中的第一个元素. 语法结构: 复制代码 代码如下: $(selector).first() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="h

  • jQuery中siblings()方法用法实例

    本文实例讲述了jQuery中siblings()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集合中每一个元素的同辈元素. 同辈元素集合可以使用表达式进行筛选. 语法结构: 复制代码 代码如下: $(selector).siblings(expr) 参数列表: 参数 描述 expr 可选.用于筛选同辈元素的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta chars

  • jQuery中insertAfter()方法用法实例

    本文实例讲述了jQuery中insertAfter()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入到另一个指定的元素集合的后面. insertAfter()方法与insertBefore()方法的作用相反. 语法结构: 复制代码 代码如下: $(selector).insertAfter(content) 参数列表: 参数 描述 selector 定义要被插入的内容. content 定义在哪些元素之后插入内容. 实例代码: 复制代码 代码如下: <!DOCTYPE h

随机推荐