关于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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
几种tab切换详解
2017/02/03 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python写的一个文本编辑器
2014/01/23 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python中方法链的使用方法
2016/02/23 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python爬虫超时的处理的实例
2018/12/19 Python
python读取各种文件数据方法解析
2018/12/29 Python
sklearn+python:线性回归案例
2020/02/24 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
业务代表的岗位职责
2013/11/16 职场文书
考试退步检讨书
2014/01/15 职场文书
公司活动邀请函
2014/01/24 职场文书
梅花魂教学反思
2014/04/25 职场文书
给校长的建议书100字
2014/05/16 职场文书
安全宣传标语
2014/06/10 职场文书
班级课外活动总结
2014/07/09 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android