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 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
JS实现复制功能
Mar 01 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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&amp;java(二)
2006/10/09 PHP
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
jquery实用代码片段集合
2010/08/12 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python数据类型详解(二)列表
2016/05/08 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python reduce()函数的用法小结
2017/11/15 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
keras.layer.input()用法说明
2020/06/16 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android