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弹幕效果
May 06 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery中库的引用方法
Jan 06 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
Jquery $.map使用方法实例详解
Sep 01 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
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
使用python在本地电脑上快速处理数据
2017/06/22 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
学生信息管理系统python版
2018/10/17 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
对Django url的几种使用方式详解
2019/08/06 Python
三个python爬虫项目实例代码
2019/12/28 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python操作链表的示例代码
2020/09/27 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
献爱心倡议书
2014/04/14 职场文书
初级党校心得体会
2014/09/11 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
netty 实现tomcat的示例代码
2022/06/05 Servers