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 23 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现评论模块
Aug 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
3种php生成唯一id的方法
2015/11/23 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
分析python请求数据
2018/08/19 Python
Python数据可视化之画图
2019/01/15 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
外贸业务员求职自荐信分享
2013/09/21 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
教师节活动主持词
2014/04/02 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
考研英语辞职信
2015/05/13 职场文书
上诉答辩状范文
2015/05/22 职场文书
高考1977观后感
2015/06/04 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL