JQuery中节点遍历方法实例


Posted in Javascript onMay 18, 2015

本文实例讲述了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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery节点遍历</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  //-----举例1.获取节点之前的挨着的第一个兄弟元素
  //var $divs = $("#div2").prev("div");   //只获取div
  //ShowArraysID($divs);
  //-----举例2.获取节点之前的所有兄弟元素
  //var $divs = $("#div2").prevAll("div"); //只获取div
  //var $divs = $("#div2").prevAll(); //获取所有兄弟元素
  //ShowArraysID($divs);
  //-----举例3.获取节点之后的挨着的第一个兄弟元素
  //var $divs = $("#div2").next("div"); //只获取div div2后紧挨着的是input所以返回零个元素
  //ShowArraysID($divs);
  //-----举例4.获取节点之后的所有兄弟元素  类似prevAll 方向相反
  //var $divs = $("#div2").nextAll(); //获取所有兄弟元素
  //ShowArraysID($divs);
  //-----举例4.siblings()方法用于获取所有同辈元素(前后都拿到)
  //$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。
  //var $divs = $("#div2").siblings("div"); //获取id为div2前后的所有div元素
  //ShowArraysID($divs);
  var $divs = $("#div2").siblings(); //获取id为div2前后的所有元素
  ShowArraysID($divs);
});
function ShowArraysID($jqueryArr) {
  var output = "";
  for (var i = 0; i < $jqueryArr.length; i++) {
    if (output == "") {
      output = $jqueryArr.eq(i).attr("id");
    }
    else {
      output += "," + $jqueryArr.eq(i).attr("id");
    }
  }
  alert(output);
}
</script>
</head>
<body>
<div id="div1">我是div1</div>
<input id="Text3" type="text" value="我是text1" />
<div id="div2">我是div2</div>
<input id="txt1" type="text" value="我是text1" />
<div id="div3">我是div3</div>
<input id="Text1" type="text" value="我是text2" />
<div id="div4">我是div4</div>
<input id="Text2" type="text" value="我是text3" />
<div id="div5">我是div5</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
react-native动态切换tab组件的方法
Jul 07 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
Jquery实现动态切换图片的方法
May 18 #Javascript
JQuery中基础过滤选择器用法实例分析
May 18 #Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 #Javascript
JQuery中属性过滤选择器用法实例分析
May 18 #Javascript
jquery表单对象属性过滤选择器实例分析
May 18 #Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 #Javascript
JavaScript的9种继承实现方式归纳
May 18 #Javascript
You might like
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
splice slice区别
2006/10/09 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
Django教程笔记之中间件middleware详解
2018/08/01 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
如何基于python实现脚本加密
2019/12/28 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
国际经济贸易专业推荐信
2013/11/06 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
Golang并发工具Singleflight
2022/05/06 Golang
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android