关于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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
js和jquery中获取非行间样式
May 05 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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/10/09 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
js实现按钮加背景图片常用方法
2014/11/01 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
实习自我评价怎么写
2013/12/02 职场文书
希特勒的演讲稿
2014/05/23 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
捐助倡议书
2015/01/19 职场文书
新员工试用期自我评价
2015/03/10 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
恰同学少年观后感
2015/06/08 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL