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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
javascript网页关键字高亮代码
Jul 30 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
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
输出控制类
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
js实现缓动动画
2020/11/25 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python实现比较文件内容异同
2018/06/22 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python实现用户名密码校验
2020/03/18 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
专业销售业务员求职信
2013/11/18 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang