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 用6N±1法求素数 实例教程
Oct 20 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
深入了解js原型模式
2019/05/30 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
JS实现简单打字测试
2020/06/24 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python和C语言混合编程实例
2014/06/04 Python
Unicode和Python的中文处理
2017/03/19 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python gdal安装与简单使用
2019/08/01 Python
Python 处理文件的几种方式
2019/08/23 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python2与Python3的区别点整理
2019/12/12 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
党员剖析材料范文
2014/09/30 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书