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 继承详解(二)
Jul 13 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
js实现简单的秒表
Jan 16 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 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和ACCESS写聊天室(八)
2006/10/09 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php获取随机数组列表的方法
2014/11/13 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python实现用户管理系统
2018/01/10 Python
python编程嵌套函数实例代码
2018/02/11 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
优秀老员工获奖感言
2014/02/15 职场文书
初一学生评语大全
2014/04/24 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
四风问题查摆材料
2014/08/25 职场文书
民主生活会剖析材料
2014/09/30 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
三方合作意向书范本
2015/05/09 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
小学运动会开幕词
2016/03/04 职场文书
导游词之崇武古城
2019/10/07 职场文书