关于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仿京东商品放大浏览页面
Jun 06 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jquery实现简易验证插件封装
Sep 13 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
Cannot modify header information错误解决方法
2008/10/08 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
python实现图片处理和特征提取详解
2017/11/13 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
培训通知
2015/04/17 职场文书
党委工作总结2015
2015/04/27 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
世界十大狙击步枪排行榜
2022/03/20 杂记
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers