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脚本
Dec 03 Javascript
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
JavaScript 指导方针
Apr 05 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 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 preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php字符串分割函数用法实例
2015/03/17 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
对联广告js flash激活
2006/10/19 Javascript
Javascript模板技术
2007/04/27 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
JS改变页面颜色源码分享
2018/02/24 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python列表推导式的使用方法
2013/11/21 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
学校关爱留守儿童活动方案
2014/08/27 职场文书
病危通知书样本
2015/04/17 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
安全生产感想
2015/08/07 职场文书
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android
springcloud整合seata
2022/05/20 Java/Android
2022年显卡天梯图(6月更新)
2022/06/17 数码科技