关于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制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
基于jQuery拖拽事件的封装
Nov 29 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 文件上传模型,支持多文件上传
2009/08/13 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php 操作符与控制结构
2012/03/07 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
PHP实现添加购物车功能
2017/03/06 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Java及python正则表达式详解
2017/12/27 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python内存管理机制原理详解
2019/08/12 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
说出数据连接池的工作机制是什么?
2013/04/19 面试题
团队队名口号大全
2014/06/06 职场文书
车贷收入证明范本
2014/09/14 职场文书
接待员岗位职责范本
2015/04/15 职场文书
社团招新宣传语
2015/07/13 职场文书
高三生物教学反思
2016/02/22 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python