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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php事件驱动化设计详解
2016/11/10 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
python海龟绘图实例教程
2014/07/24 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
大学生村官任职感言
2014/01/09 职场文书
syb养殖创业计划书
2014/01/09 职场文书
工程材料采购方案
2014/05/18 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
简历自我评价优缺点
2015/03/11 职场文书
民事上诉状范文
2015/05/22 职场文书