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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现简单轮播图效果
Dec 27 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开发中四种查询返回结果分析
2011/01/02 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php车辆违章查询数据示例
2016/10/14 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
EsLint入门学习教程
2017/02/17 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
koa源码中promise的解读
2018/11/13 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
用python代码做configure文件
2014/07/20 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python中的 enum 模块源码详析
2019/01/09 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Opencv求取连通区域重心实例
2020/06/04 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
考试违纪检讨书
2014/02/02 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
80后婚前协议书范本
2014/10/24 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js