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创建自定义表格具体实现
Feb 11 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
jquery ajax例子返回值详解
2012/09/11 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python中使用支持向量机SVM实践
2017/12/27 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
办公室文秘自我评价
2013/09/21 职场文书
高中军训第一天感言
2014/03/06 职场文书
四下基层实施方案
2014/03/28 职场文书
员工保密承诺书
2014/05/28 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
小学运动会入场口号
2015/12/24 职场文书