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 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
vue router 配置路由的方法
Jul 26 Javascript
js html实现计算器功能
Nov 13 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
vue实现简易音乐播放器
Aug 14 Vue.js
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数组操作
2011/12/30 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js选项卡的实现方法
2015/02/09 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python实现简单登录验证
2016/04/13 Python
Python中装饰器学习总结
2018/02/10 Python
Python遍历numpy数组的实例
2018/04/04 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
精彩自我鉴定
2014/01/16 职场文书
公司新年寄语
2014/04/04 职场文书
委托书范本
2014/09/13 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
大学生实训报告总结
2014/11/05 职场文书
工程部经理岗位职责
2015/02/02 职场文书
Python实现byte转integer
2021/06/03 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL