关于jQuery里prev()的简单操作代码


Posted in jQuery onOctober 27, 2017

prev() 函数被用来匹配元素集的前一个兄弟元素,仅仅只有前一个兄弟元素被选择,其子元素将被忽略。这里给大家介绍jQuery里prev()的简单操作,具体内容如下:

一个朋友提了个需求给我:点击按钮删除input,如果input剩一个,点击按钮全部消失。

很简单的操作,但是你如果不知道jquery里有prev()这个方法,可能你会走很多弯路。

代码:

html

<div>
  <input type="text" placeholder="用户名">
  <input type="text" placeholder="用户名">
  <input type="text" type="hidden">
  <input type="text" type="hidden">
  <a class="reduce" onclick="less()">—</a>
 </div>

css

.reduce{
   display: inline-block;
   color: white;
   text-align: center;
   width: 30px;
   height: 30px;
   background: red;
   line-height: 30px;
   cursor: pointer;
  }
  input{
   height: 18px;
   padding: 5px 10px;
  }

JS

<script src="jquery-1.7.2.min.js"></script>
<script>
 var Reduce = document.getElementsByClassName("reduce");
 var Inp = document.getElementsByTagName("input");
 function less(){
    //查找元素的上一个元素 并移除
  $(".reduce").prev().remove();
  if(Inp.length < 1){
   $(".reduce").remove()
  }
 }
 $(".reduce")
</script>

这里我混合写的,不规范,只做一个栗子,重在理解。

总结

以上所述是小编给大家介绍的关于jQuery里prev()的简单操作代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 #jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
You might like
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
js格式化时间的方法
2015/12/18 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
js编写简易的计算器
2020/07/29 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
浅析使用Python操作文件
2017/07/31 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
高级护理专业大学生求职信
2013/10/24 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
公司贷款承诺书
2014/05/30 职场文书
七一讲话心得体会
2014/09/05 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
生产实习心得体会范文
2016/01/22 职场文书
vue动态绑定style样式
2022/04/20 Vue.js