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 相关文章推荐
document.all与WEB标准
May 13 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
YUI模块开发原理详解
Nov 18 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
js变量提升深入理解
Sep 16 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
JQuery animate动画应用示例
May 14 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
php模板之Phpbean的目录结构
2008/01/10 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
vue 微信授权登录解决方案
2018/04/10 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python实现元素等待代码实例
2019/11/11 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
门卫人员岗位职责
2013/12/24 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
办公室主任职责范本
2014/03/07 职场文书
销售经理岗位职责
2014/03/16 职场文书
怎样写离婚协议书
2014/09/10 职场文书
治庸问责心得体会
2014/09/12 职场文书
五一放假通知怎么写
2015/08/18 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python