关于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平滑滚动到顶部插件使用详解
May 08 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
JQuery表单元素取值赋值方法总结
May 12 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
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
网上抓的一个特效
2007/05/11 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Python中多线程及程序锁浅析
2015/01/21 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python descriptor(描述符)的实现
2020/11/15 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
亲子活动总结
2014/04/26 职场文书
农村文化建设标语
2014/10/07 职场文书
先进党员事迹材料
2014/12/24 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python