JQ选择器_选择同类元素的第N个子元素的实现方法


Posted in Javascript onSeptember 08, 2016

之前想选择所有UL中的第N个LI ,于是这样写: $('ul li:eq(N-1)')  ,它的结果是选择所有UL 下面的LI得出的结果中的第N个元素,这个思维是错误的(因为看着蛮顺眼的:选择所有UL 下面的第N个LI,在我脑子里$('ul li:eq(N-1)')已经被我分开解析了,要是官方能做成这种链式写法就好了比如:$('ul').$('li:eq(N-1)')),看来这写法还得等我再学多点东西再自己写个框架出来,

既然自己搞混了,突然感觉选择器这种东西还蛮高深的样子,要用好不简单

既然无法同时选择那就用遍历就行了,下面是个例子,至于遍历的写法很多自己喜欢。

贴代码(选择每个UL里面的第三个LI):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>我是第一个UL里面的第一个LI</li>
<li>我是第一个UL里面的第二个LI</li>
<li>我是第一个UL里面的第三个LI</li>
</ul>
<ul>
<li>我是第二个UL里面的第一个LI</li>
<li>我是第二个UL里面的第二个LI</li>
<li>我是第二个UL里面的第三个LI</li>
</ul>
<script type="text/javascript">
$.each($('ul'), function() {

var li=$(this).children().last();
alert($(li).text());//其实我还蛮好奇这里为什么不能等价于  alert(li.innerHTML);不是说dom 和 jq对象互相转换吗,为什么写成后面那样子结果为undefine??

});
</script>
</body>
</html>

以上这篇JQ选择器_选择同类元素的第N个子元素的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
初识Node.js
Mar 20 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
页面点击小红心js实现代码
May 26 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
jQuery事件绑定用法详解
Sep 08 #Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 #Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 #Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 #Javascript
JS输出空格的简单实现方法
Sep 08 #Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 #Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 #Javascript
You might like
使用php实现截取指定长度
2013/08/06 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
Javascript Objects详解
2014/09/04 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
Python第三方库的安装方法总结
2016/06/06 Python
python多进程实现进程间通信实例
2017/11/24 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
抽象类和接口的区别
2012/09/19 面试题
养生餐厅创业计划书范文
2014/03/26 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
实习协议书
2015/01/27 职场文书
2015个人简历自我评价语
2015/03/11 职场文书