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 相关文章推荐
javascript代码加载优化方法
Jan 30 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
Javascript函数的参数
2015/07/16 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python基础教程之字典操作详解
2014/03/25 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python和Go语言的区别总结
2019/02/20 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python Kmeans算法原理深入解析
2019/08/23 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Java程序员面试题
2013/07/15 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
机关搬迁方案
2014/05/18 职场文书
收款委托书
2014/10/14 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技