关于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 dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jquery添加div实现消息聊天框
Feb 08 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
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
Bootstrap基础学习
2015/06/16 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
基于Python __dict__与dir()的区别详解
2017/10/30 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python实现石头剪刀布游戏
2021/01/20 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
新品发布会策划方案
2014/06/08 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2014年工程部工作总结
2014/11/25 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Python turtle实现贪吃蛇游戏
2021/06/18 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
Python如何将list中的string转换为int
2022/07/15 Ruby