关于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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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防注入漏洞过滤函数代码
2012/04/11 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
Python学习思维导图(必看篇)
2017/06/26 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
简历里的自我评价
2014/01/31 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
经费申请报告
2015/05/15 职场文书
绿里奇迹观后感
2015/06/15 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Java实现给Word文件添加文字水印
2022/02/15 Java/Android