jQuery选择器选中最后一个元素,倒数第二个元素操作示例


Posted in jQuery onDecember 10, 2018

本文实例讲述了jQuery选择器选中最后一个元素,倒数第二个元素操作。分享给大家供大家参考,具体如下:

HTML部分:

<div>
  <p>元素1</p>
  <p>元素2</p>
  <p>元素3</p>
  <p>元素4</p>
  <p>元素5</p>
</div>

取倒数第二个p元素

$("div p").eq(-2)

取最后一个p元素

$("div p").last()

完整测试示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery选择器</title>
<style>
.red{color:#FF0000;}
.blue{color:#0000FF;}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div p").eq(-2).addClass('red');//倒数第二个p元素
$("div p").last().addClass('blue');//最后一个p元素
});
</script>
<div>
  <p>元素1</p>
  <p>元素2</p>
  <p>元素3</p>
  <p>元素4</p>
  <p>元素5</p>
</div>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下运行效果:

jQuery选择器选中最后一个元素,倒数第二个元素操作示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 #jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 #jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
You might like
php下通过POST还是GET来传值
2008/06/05 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
mysql总结之explain
2012/02/27 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
vue项目中使用Svg的方法
2018/10/24 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
vue实现简易计算器功能
2021/01/20 Vue.js
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python识别处理照片中的条形码
2020/11/16 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
当当网软件测试笔试题
2015/11/24 面试题
诚信贷款承诺书
2014/05/30 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技