关于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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
第十四节--命名空间
2006/11/16 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php中session使用示例
2014/03/29 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
JavaScript实现大图轮播效果
2017/01/11 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
学习python (2)
2006/10/31 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python反编译学习之字节码详解
2019/05/19 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
求职者应聘的自我评价
2013/10/16 职场文书
优乐美广告词
2014/03/14 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
超市创业计划书
2014/04/24 职场文书
校园环保建议书
2014/05/14 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
节水倡议书
2015/01/19 职场文书
罚站检讨书
2015/01/29 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
python 调用js的四种方式
2021/04/11 Python
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
python flappy bird小游戏分步实现流程
2022/02/15 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA