关于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.form.js异步提交表单详解
Apr 25 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现飞机大战小游戏
Jul 05 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP实现简易计算器功能
2020/08/28 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
js继承实现方法详解
2016/12/16 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Golang与python线程详解及简单实例
2017/04/27 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Python数学形态学实例分析
2019/09/06 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
标准毕业生自荐信
2014/06/24 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
疾病证明书
2015/06/19 职场文书
值班管理制度范本
2015/08/06 职场文书