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程序设计有所帮助。

Javascript 相关文章推荐
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 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
You might like
PHP sprintf()函数用例解析
2011/05/18 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
简单的JS多重继承示例
2008/03/13 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python函数的万能参数传参详解
2019/07/26 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
和平主题的演讲稿
2014/01/12 职场文书
会计自我鉴定
2014/02/04 职场文书
停水通知
2015/04/16 职场文书
运动会通讯稿50字
2015/07/20 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书