关于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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery实现弹出层效果
Dec 10 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中的字符串函数
2006/11/24 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python根据出生年份简单计算生肖的方法
2015/03/27 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python多任务之协程的使用详解
2019/08/26 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
事业单位接收函
2014/01/10 职场文书
运动会方队口号
2014/06/07 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
小学一年级数学教学反思
2016/02/16 职场文书