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调试logger组件实现代码
Nov 20 Javascript
javascript数组排序汇总
Jul 07 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
实用的Vue开发技巧
May 30 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现本地存储
Dec 22 jQuery
uniapp微信小程序:key失效的解决方法
Jan 20 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原理之变量(Variables inside PHP)
2013/08/09 PHP
php生成随机数的三种方法
2014/09/10 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
详解php命令注入攻击
2019/04/06 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
python技能之数据导出excel的实例代码
2017/08/11 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
十八大报告观后感
2014/01/28 职场文书
股东合作协议书范本
2014/04/14 职场文书
大学学风建设方案
2014/05/04 职场文书
公民授权委托书
2014/10/15 职场文书
2014年底个人工作总结
2015/03/10 职场文书
教师创先争优承诺书
2015/04/27 职场文书
教师节主持词开场白
2015/05/29 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL