当前位置:首页 > 编程教程 > jQuery技术文章 > JQ选择器_选择同类元素的第N个子元素的实现方法

jQuery选择同类元素的第N个子元素的实现方法

  • 发布时间:
  • 作者:码农之家
  • 点击:172

这篇文章主要知识点是关于jQuery、元素选择器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践
  • 类型:前端开发大小:167.1 MB格式:PDF作者:阮晓龙
立即下载

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个子元素的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jquery 相关电子书
学习笔记
网友NO.654869

jQuery选择器之子元素选择器详解

本文实例为大家分享了jQuery子元素选择器,供大家参考,具体内容如下 !DOCTYPE htmlhtmlhead meta http-equiv="Content-type" content="text/html; charset=utf-8" / title/title link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css" script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"/script/headbody h2子元素筛选选择器/h2 h3:first-child、:last-child、:only-child/h3 div class="left first-div" div class="div" a:first-child/a a第二个元素/a a:last-child/a /div div class="div" a:first-child/a /div div class="div" a:first-child/a a第二个元素/a a:last-child/a /div /div script type="text/javascript" //查找class="first-div"下的第一个a元素 //针对所有父级下的第一个 $(".first-div a:first-child").css("color", "#CD00CD"); /script script type="text/javascript" //查找class="first-div"下的最后一个a元素 //针对所有父级下的最后一个 //如果只有一个元素的话,last也是第一个元素 $(".fi……

网友NO.468124

jquery通过closest选择器修改上级元素的方法

本文实例讲述了jquery通过closest选择器修改上级元素的方法。分享给大家供大家参考。具体如下: 这段代码演示了jQuery通过closest选择器获取上一级的元素,然后修改其text()内容。 !DOCTYPE htmlhtmlheadmeta http-equiv="content-type" content="text/html; charset=UTF-8"title www.jb51.net /titlescript type='text/javascript' src='jquery-1.9.1.js'/scriptscript type='text/javascript'//![CDATA[$(window).load(function(){var address = $("#jb51").closest("div");address.text('www.jb51.net')});//]]/script/headbodydiv id="website"div id="jb51"/div/div/body/html 更多关于jquery选择器相关内容感兴趣的读者可查看本站专题:《jquery选择器用法总结》 希望本文所述对大家的jQuery程序设计有所帮助。 ……

网友NO.516889

jquery子元素过滤选择器使用示例

:nth-child('索引值')//获取指定元素下的某个子元素的位置,索引从1开始; //偶数行 //$('li:nth-child(even)').addClass('class1'); //奇数行 //$('li:nth-child(odd)').addClass('class1'); //第一行 //$('li:nth-child(1)').addClass('class1'); //$('li:first-child').addClass('class1'); //只有1个子元素 $('li:only-child').addClass('class1'); ……

网友NO.876317

jquery层级选择器(匹配父元素下的子元素实现代码)

实例如下: !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/xhtml" head title层级 /title meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / script type="text/javascript" src="jquery-1.7.1.min.js"/script script type="text/javascript" /* ancetor descendant:匹配祖先元素下的后代元素 parentchild:匹配父元素下的子元素 prev+next:匹配前一个元素后的下一个元素,必须是挨着的 prev~siblings:匹配前一个元素后的所有平辈元素 */ window.onload=function(){ $('#btnOk').click(function(){ //匹配父元素下的子元素 $('#indexdiv').html('php'); }); }; /script /head body div id='index' divdiv1/div form divdiv2/div !--为index下div的孙子辈元素-- divdiv3/div!--为index下div的孙子辈元素-- /form divdiv4/div divdiv5/div /div divyang/div !--该元素不是在id=index下的div中,不是其后代元素;是兄弟……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

idea注册码