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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
JS实现4位随机验证码
Oct 19 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实现用户认证及管理完全源码
2007/03/11 PHP
php使用GeoIP库实例
2014/06/27 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
详解jQuery中的事件
2016/12/14 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
服务宗旨标语
2014/07/01 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
实习班主任自我评价
2015/03/11 职场文书
销售员自我评价
2015/03/11 职场文书