关于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 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jquery实现直播视频弹幕效果
Feb 25 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中操作ini配置文件的方法
2013/04/25 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
JS input 数字验证代码
2009/07/30 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
Python中文字符串截取问题
2015/06/15 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python中Lambda表达式详解
2019/11/20 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python模块future用法原理详解
2020/01/20 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
医学专业个人求职自荐信格式
2013/09/23 职场文书
环保倡议书
2014/04/14 职场文书
通知的格式范文
2015/04/27 职场文书
朋友聚会开场白
2015/06/01 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python