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()事件返回的值并添加事件的方法
Apr 15 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
详解vue v-model
Aug 31 Javascript
微信小程序实现列表左右滑动
Nov 19 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python实现textrank关键词提取
2018/06/22 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
小学优秀辅导员事迹材料
2014/05/11 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书