分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jQuery使用(十一):jQuery实例遍历与索引

发布时间:2023-09-06 02:34责任编辑:沈小雨关键词:jQuery遍历
  • each()
  • children()
  • index()

 一、jQuery实例遍历方法each()

 jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element。这个方法本身应用非常的简单,所以要来点不简单的东西,请看以下代码:

<ul> ???<li></li> ???<li></li> ???<li></li></ul>//js//需求一是将每个li的索引值作为文本添加给对应的li//需求二是将每个li的所以加上“demo”添加给对应的li作为类名//思路一:$("li").text(function(){ ???//循环获取每个li添加文本}).addClass(function(){ ???//循环获取每个li添加类名});

思路一的解决方案循环了两次,从上面的需求来看应该是具备一次循环即可解决这两个需求的方案:

$("li").each(function(index,ele){ ???$(ele) ???????.text(index) ???????????.addClass(‘demo‘ + index);});

 二、jQuery实例方法children()

 children方法用来获取元素的直接子元素,这个非常的简单,来个叫demo就好了。

<p> ???<span></span> ???<i></i> ???<span></span> ???<i></i> ???<span></span> ???<li></li></p>//js//需求是给p元素下的每个子元素添加文本是:tagName- + index$("p").children().each(function(index, el) { ???if(el.nodeName == "I"){ ???????$(el).text("i-" + index); ???}else{ ???????$(el).text("span-" + index); ???}});

 三、jQuery实例方法index()

 index获取DOM在jQuery对象集合中的索引,非常的简单,但是可以传入参数才是真正的高校操作,比如在上面的HTML结构中,要获取p元素内span或者i是第几个:

$("p").on("click",function(e){ ???var par = $(e.target).parent(); ???if(e.target.nodeName == "SPAN"){ ???????alert(par.children(‘span‘).index($(e.target))); ???}else if(e.target.nodeName == "I"){ ???????alert(par.children(‘i‘).index($(e.target))); ???}});

jQuery使用(十一):jQuery实例遍历与索引

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/10372120.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved