JQ选择器_选择同类元素的第N个子元素的实现方法
之前想选择所有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个子元素的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jQuery层次选择器选择元素使用介绍
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代.父子.相邻.兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.
-
jQuery选择器总结之常用元素查找方法
选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1.简化代码的编写 2.隐式迭代 3.无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $
-
使用jquery选择器如何获取父级元素、同级元素、子元素
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu
-
JQ选择器_选择同类元素的第N个子元素的实现方法
之前想选择所有UL中的第N个LI ,于是这样写: $('ul li:eq(N-1)') ,它的结果是选择所有UL 下面的LI得出的结果中的第N个元素,这个思维是错误的(因为看着蛮顺眼的:选择所有UL 下面的第N个LI,在我脑子里$('ul li:eq(N-1)')已经被我分开解析了,要是官方能做成这种链式写法就好了比如:$('ul').$('li:eq(N-1)')),看来这写法还得等我再学多点东西再自己写个框架出来, 既然自己搞混了,突然感觉选择器这种东西还蛮高深的样子,要用好不简单 既然无
-
高效的获取当前元素是父元素的第几个子元素
例如处理事件的时候,有时候需要知道当前点击的是第几个子节点,而HTML DOM本身并没有直接提供相应的属性,需要自己来计算. 从一个索引序号,很容易得到该索引对应的子节点或者子元素,直接用parentNode.childNodes[index] 或 parentNode.children[index] 就行. 但反过来,已知一个节点或元素对象,要知道它的索引序号则没有那么直接了. 一些特殊的元素,HTML DOM有对应的属性表示其索引序号,主要是表格的TD 和 TR 元素. 表格单元格TD元素有
-
Js操作DOM元素及获取浏览器高宽的简单方法
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS
-
jquery选择器的选择使用及性能介绍
在写完第一回之后,看到了朋友们的回复,指出了我代码中的一些问题,确实由于时间仓促没有使用IDE,直接搞上了,又由于本人记忆力不好,所以把大小写都忘记了,还好晚上回家,用VS改了一下,呵呵,真是对不住大家了. 从这一讲开始,我们将直正接触一个JQ类库,学习一下JQ的写法,JQ的一些常用的命令等等,今天主要讲的是JQ里的选择器,这也是JQ的一大特点,这从它的名称jQuery中可以看到,主要功力体现在查询上. 前言:对于写在<script></script>中的代码,一般在JS环境,我们
-
jQuery层级选择器_动力节点节点Java学院整理
因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择. 层级选择器(Descendant Selector) 如果两个DOM元素具有层级关系,就可以用$('ancestor descendant')来选择,层级之间用空格隔开.例如: <!-- HTML结构 --> <div class="testing"> <ul class="lang"> <li class="lang-javascript&quo
-
java排序算法之_选择排序(实例讲解)
选择排序是一种非常简单的排序算法,从字面意思我们就可以知道,选择就是从未排序好的序列中选择出最小(最大)的元素,然后与第 i 趟排序的第 i-1(数组中下标从 0 开始) 个位置的元素进行交换,第 i 个元素之前的序列就是已经排序好的序列.整个排序过程只需要遍历 n-1 趟便可排好,最后一个元素自动为最大(最小)值. 举个小例子: arr[] = {3,1,2,6,5,4} 第 1 趟排序: index = 0, min = 1, 交换后 --> 1,3,2,6,5,4 第 2 趟排序: in
-
jQuery+css last-child实现选择最后一个子元素操作示例
本文实例讲述了jQuery+css last-child实现选择最后一个子元素操作.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
jQuery 选择同时包含两个class的元素的实现方法
jQuery 选择同时包含两个class的元素的实现方法 <element class="a b"> 1. 交集选择: $(".a.b")--选择同时包含a和b的元素. 2. 并集选择:$(".a, .b")--选择包含a或者包含b的元素. 以上这篇jQuery 选择同时包含两个class的元素的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
本文实例讲述了jQuery创建自定义的选择器用以选择高度大于100的超链接实现方法.分享给大家供大家参考.具体分析如下: jQuery创建一个自定义的选择器,自己定义的这个选择器实际上可以是一个函数,下面的JS代码定义了一个over100pixels的选择器,选择出高度大于100的链接,这类技巧非常实用 $.extend($.expr[':'], { over100pixels: function(a) { return $(a).height() > 100; } }); $('.box:ov
-
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
本文实例讲述了jQuery选择器选中最后一个元素,倒数第二个元素操作.分享给大家供大家参考,具体如下: HTML部分: <div> <p>元素1</p> <p>元素2</p> <p>元素3</p> <p>元素4</p> <p>元素5</p> </div> 取倒数第二个p元素 $("div p").eq(-2) 取最后一个p元素 $("
随机推荐
- Angular限制input框输入金额(是小数的话只保留两位小数点)
- C++中的string类的用法小结
- 如何配置docker官方源并用yum安装docker
- C#实现的XML操作类实例
- vuejs使用递归组件实现树形目录的方法
- 跟我学习javascript的定时器
- C#中增加SQLite事务操作支持与使用方法
- JavaScript instanceof 的使用方法示例介绍
- mysql如何处理varchar与nvarchar类型中的特殊字符
- php运行出现Call to undefined function curl_init()的解决方法
- Vue-router 类似Vuex实现组件化开发的示例
- jQuery插件zTree实现获取一级节点数据的方法
- php递归使用示例(php递归函数)
- shell监控脚本实例—监控mysql主从复制
- 使用shell脚本找出网站的空页面和404错误页面
- jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
- JS中批量给元素绑定事件过程中的相关问题使用闭包解决
- Python中的rjust()方法使用详解
- 深入java事件注册的应用分析
- Python中使用md5sum检查目录中相同文件代码分享