jQuery中closest()函数用法实例


Posted in Javascript onJanuary 07, 2015

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

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

语法结构一:

$(selector).closest(expr, context)

参数列表:

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

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.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("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="https://3water.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>

<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="https://3water.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>

<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="https://3water.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>

<div id="father">

  <div id="children">

    <p>我是孙子p</p>

  </div>

  <p>我是儿子p</p>

</div>

<p>我是兄弟p</p>

</body>

</html>

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

Javascript 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
JavaScript中的Function函数
Aug 27 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
自己封装的常用javascript函数分享
Jan 07 #Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 #Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 #Javascript
jQuery中children()方法用法实例
Jan 07 #Javascript
angular.element方法汇总
Jan 07 #Javascript
jQuery中slice()方法用法实例
Jan 07 #Javascript
You might like
php 分库分表hash算法
2009/11/12 PHP
基于empty函数的判断详解
2013/06/17 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php实现的xml操作类
2016/01/15 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
javascript date格式化示例
2013/09/25 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
行政经理岗位职责
2013/11/09 职场文书
实习老师离校感言
2014/02/03 职场文书
社区先进事迹材料
2014/05/19 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL