jQuery的遍历结构设计——同胞元素的遍历例子

最新推荐文章于 2024-07-15 14:11:16 发布

weixin_33841722

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量65

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/933915/blog/363915

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、遍历的接口分为祖先同胞兄弟后代过滤

基础知识： nodeType 元素类型节点类型元素 1 属性 2 文本 3 注释 8 文档 9

nodeName 元素节点的nodeName是标签名称属性节点的nodeName是属性名称文本节点的nodeName永远是 #text 文档节点的nodeName永远是 #document

2、同胞遍历的例子：

<!-- lang: html -->
<!DOCTYPE HTML>
<!-- lang: html -->
<html>
<!-- lang: html -->
<head>
<!-- lang: html -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- lang: html -->
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
<!-- lang: html -->
<!-- <script type="text/javascript" src="../jquery-2.1.1.js"></script> -->
<!-- lang: html -->
<title></title>
<!-- lang: html -->
</head>
<!-- lang: html -->
<body>
<!-- lang: html -->

<!-- lang: html -->
<button id="test1">jQuery遍历同胞</button>
<!-- lang: html -->
<button id="test2">模拟遍历同胞</button>
<!-- lang: html -->

<!-- lang: html -->
<ul class="level-1">
<!-- lang: html -->
  <li class="item-i">I</li>
<!-- lang: html -->
  <li class="item-ii">II
<!-- lang: html -->
    <ul class="level-2">
<!-- lang: html -->
      <li class="item-a">A</li>
<!-- lang: html -->
      <li class="item-b">B
<!-- lang: html -->
        <ul class="level-3">
<!-- lang: html -->
          <li class="item-1">1</li>
<!-- lang: html -->
          <li class="item-2">2</li>
<!-- lang: html -->
          <li class="item-3">3</li>
<!-- lang: html -->
        </ul>
<!-- lang: html -->
      </li>
<!-- lang: html -->
      <li class="item-c">C</li>
<!-- lang: html -->
    </ul>
<!-- lang: html -->
  </li>
<!-- lang: html -->
  <li class="item-iii">III</li>
<!-- lang: html -->
</ul>
<!-- lang: html -->

<!-- lang: html -->

js代码

function nextAll(elem) { return dir(elem, "nextSibling"); }

function prevAll(elem) { return dir(elem, "previousSibling"); }

function nextUntil(elem, until) { return dir(elem, "nextSibling", until); }

function prevUntil(elem, until) { return dir(elem, "previousSibling", until); }

$("#test1").click(function(){ var item = $('li.item-ii'); alert(item.nextAll()[0].className) alert(item.prevAll()[0].className) alert(item.nextUntil('.end')[0].className) alert(item.prevUntil('.first')[0].className) })

$("#test2").click(function(){ var item = document.querySelectorAll('li.item-ii')[0] alert(nextAll(item)[0].className) alert(prevAll(item)[0].className) alert(nextUntil(item, '.end')[0].className) alert(prevUntil(item, '.first')[0].className) })

转载于:https://my.oschina.net/u/933915/blog/363915