欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery中closest()函数用法实例教程

程序员文章站 2022-06-05 20:58:19
本文实例讲述了jquery中closest()函数用法。分享给大家供大家参考。具体分析如下: 此函数从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。 closest(...

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

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

语法结构一:

代码如下:

$(selector).closest(expr, context)

 

参数列表:

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

 

实例代码:

实例一:

 

代码如下:


<!doctype html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.cnblogs.com/" />
<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("p").css("color","green");
})
</script>
</head>
<body>
<p class="father">
  <p class="children"> 我是p
    <p>我是孙子p</p>
  </p>
  <p>我是儿子p</p>
</p>
<p>我是兄弟p</p>
</body>
</html>

 

实例二:

 

代码如下:


<!doctype html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.cnblogs.com/" />
<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>
<p id="father">
  <p id="children">
    <p>我是孙子p</p>
  </p>
  <p>我是儿子p</p>
</p>
<p>我是兄弟p</p>
</body>
</html>

 

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

语法结构二:

代码如下:

$(selector).closest(element)

 

参数列表:

参数 描述
element 用于匹配元素的dom元素或者jquery元素。

 

实例代码:

实例一:

 

代码如下:


<!doctype html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.cnblogs.com/" />
<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>
<p id="father">
  <p id="children">
    <p>我是孙子p</p>
  </p>
  <p>我是儿子p</p>
</p>
<p>我是兄弟p</p>
</body>
</html>

 

实例二:

 

代码如下:


<!doctype html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.cnblogs.com/" />
<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>
<p id="father">
  <p id="children">
    <p>我是孙子p</p>
  </p>
  <p>我是儿子p</p>
</p>
<p>我是兄弟p</p>
</body>
</html>