首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery中parentsUntil()方法用法实例

Posted in Javascript onJanuary 07, 2015

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

此方法查找匹配元素的所有的祖先元素，直到遇到expr表达式、DOM元素或者jQuery元素匹配的那个元素为止。
取得祖先元素集合可以通过筛选表达式进行筛选。

注意:祖先元素中并不包含expr表达式、DOM元素或者jQuery元素匹配的元素。

语法:

语法一:

$(selector).parentsUntil(expr,filter)

参数列表:

参数 描述
expr 可选。用于筛选祖先元素的表达式。
filter 可选。用于对取得的祖先元素集合进行筛选。

实例:

实例一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $("li").parentsUntil(".inner").css("border","1px solid blue");

    })

</script>

</head>

<body>

    <div class="outer">

        <div>三水点靠木欢迎您</div>

        <div class="inner">

            <ul class="first">

                <li>HTML专区</li>

                <li>Javascript专区</li>

                <li>Div+CSS专区</li>

                <li>Jquery专区</li>

            </ul>

            <ul class="second">

                <li>HTML专区</li>

                <li>Javascript专区</li>

                <li>Div+CSS专区</li>

                <li>Jquery专区</li>

            </ul>

        </div>

    </div>

</body>

</html>

实例二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $("li").parentsUntil(".inner",".second").css("border","1px solid blue");

    })

</script>

</head>

<body>

    <div class="outer">

        <div>三水点靠木欢迎您</div>

        <div class="inner">

            <ul class="first">

                <li>HTML专区</li>

                <li>Javascript专区</li>

                <li>Div+CSS专区</li>

                <li>Jquery专区</li>

            </ul>

            <ul class="second">

                <li>HTML专区</li>

                <li>Javascript专区</li>

                <li>Div+CSS专区</li>

                <li>Jquery专区</li>

            </ul>

        </div>

    </div>

</body>

</html>

语法二:

$(selector).parentsUntil(element,filter)

参数列表:

参数 描述
element 可选。用于筛选祖先元素的DOM元素或者jQuery元素。
filter 可选。用于对取得的祖先元素集合进行筛选。

实例:

实例一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $("li").parentsUntil(document.getElementById("inner")).css("border","1px solid blue");

    })

</script>

</head>

<body>

    <div class="outer">

        <div>三水点靠木欢迎您</div>

        <div id="inner">

            <ul class="first">

                <li>HTML专区</li>

                <li>Javascript专区</li>

                <li>Div+CSS专区</li>

                <li>Jquery专区</li>

            </ul>

            <ul class="second">

                <li>HTML专区</li>

                <li>Javascript专区</li>

                <li>Div+CSS专区</li>

                <li>Jquery专区</li>

            </ul>

        </div>

    </div>

</body>

</html>

实例二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $("li").parentsUntil(document.getElementById("inner"),".second").css("border","1px solid blue");

    })

</script>

</head>

<body>

    <div class="outer">

        <div>三水点靠木欢迎您</div>

        <div id="inner">

            <ul class="first">

                <li>HTML专区</li>

                <li>Javascript专区</li>

                <li>Div+CSS专区</li>

                <li>Jquery专区</li>

            </ul>

            <ul class="second">

                <li>HTML专区</li>

                <li>Javascript专区</li>

                <li>Div+CSS专区</li>

                <li>Jquery专区</li>

            </ul>

        </div>

    </div>

</body>

</html>

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

jQuery中parentsUntil()方法用法实例

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
比Jquery的document.ready更快的方法
Apr 28 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
angular.js实现购物车功能
Oct 23 Javascript
JS闭包经典实例详解
Dec 20 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
js瀑布流布局的实现
Jun 28 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
jQuery中parents()方法用法实例
Jan 07 #Javascript
jQuery中parent()方法用法实例
Jan 07 #Javascript
jQuery中nextUntil()方法用法实例
Jan 07 #Javascript
jQuery中nextAll()方法用法实例
Jan 07 #Javascript
jQuery中next()方法用法实例
Jan 07 #Javascript
jQuery中find()方法用法实例
Jan 07 #Javascript
jQuery中closest()函数用法实例
Jan 07 #Javascript
PostMapping(1) 温控(1) Spring(9) 微信(2) IC-R9500(1) 小喇叭(1) 小喇叭开始广播了(1) 内存泄露(1) Lifecycle(1) S-2000(1)
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
网页游戏开发入门教程二（游戏模式+系统）
2009/11/02 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
js date 格式化
2017/02/15 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
了解AppleTalk协议吗
2014/04/01 面试题
测控技术与仪器个人求职信范文
2013/12/30 职场文书
外贸业务员工作职责
2014/01/06 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
优秀部门获奖感言
2014/02/14 职场文书
白酒市场营销方案
2014/02/25 职场文书
融资租赁计划书
2014/04/29 职场文书
校长四风对照检查材料
2014/09/27 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书