jQuery中prevUntil()方法用法实例


Posted in Javascript onJanuary 08, 2015

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

此函数查找匹配元素之前所有的同辈元素,直到遇到expr表达式、DOM元素或者jQuery元素匹配的那个元素为止。
可以使用可选的表达式对同辈元素集合进行筛选。

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

语法:

语法 一:

$(selector).prevUntil(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>

<style type="text/css">

.father {

        height:200px;

        width:200px;

        border:1px solid blue;

}

</style>

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

<script type="text/javascript">

    $(document).ready(function(){

        $(".father div").prevUntil(".firstp").css("color","blue")

    })

</script>

</head>

<body>

<div class="father">

  <p class="firstp">我是p元素</p>

  <span>我是span元素</span>

  <p>我是p元素</p>

  <div>我是div元素</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>

<style type="text/css">

.father {

        height:200px;

        width:200px;

        border:1px solid blue;

}

</style>

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

<script type="text/javascript">

    $(document).ready(function(){

        $(".father div").prevUntil(".firstp","span").css("color","blue")

    })

</script>

</head>

<body>

<div class="father">

  <p class="firstp">我是p元素</p>

  <span>我是span元素</span>

  <p>我是p元素</p>

  <div>我是div元素</div>

</div>

</body>

</html>

语法二:

$(selector).prevUntil(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>

<style type="text/css">

.father {

        height:200px;

        width:200px;

        border:1px solid blue;

}

</style>

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

<script type="text/javascript">

    $(document).ready(function(){

        $(".father div").prevUntil(document.getElementById("firstp")).css("color","blue")

    })

</script>

</head>

<body>

<div class="father">

  <p id="firstp">我是p元素</p>

  <span>我是span元素</span>

  <p>我是p元素</p>

  <div>我是div元素</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>

<style type="text/css">

.father {

        height:200px;

        width:200px;

        border:1px solid blue;

}

</style>

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

<script type="text/javascript">

    $(document).ready(function(){

        $(".father div").prevUntil(document.getElementById("firstp"),"span").css("color","blue")

    })

</script>

</head>

<body>

<div class="father">

  <p id="firstp">我是p元素</p>

  <span>我是span元素</span>

  <p>我是p元素</p>

  <div>我是div元素</div>

</div>

</body>

</html>

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

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
jQuery中prevAll()方法用法实例
Jan 08 #Javascript
jQuery中prev()方法用法实例
Jan 08 #Javascript
深入探密Javascript数组方法
Jan 08 #Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 #Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 #Javascript
jQuery中parents()方法用法实例
Jan 07 #Javascript
jQuery中parent()方法用法实例
Jan 07 #Javascript
You might like
解析PHP提交后跳转
2013/06/23 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
php无序树实现方法
2015/07/28 PHP
php session 写入数据库
2016/02/13 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
PyTorch中的C++扩展实现
2020/04/02 Python
python的launcher用法知识点总结
2020/08/07 Python
常用的10个Python实用小技巧
2020/08/10 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
班干部竞选演讲稿
2014/04/24 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
就业协议书怎么填
2014/09/15 职场文书
爱心募捐感谢信
2015/01/22 职场文书
公司放假通知怎么写
2015/04/15 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
红白喜事主持词
2015/07/06 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书