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

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

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

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

2、同胞遍历的例子:


<!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 dir(elem, dir, until) {
var matched = [],

truncate = until !== undefined;

while ((elem = elem[dir]) && elem.nodeType !== 9) {

if (elem.nodeType === 1) {
  if (truncate) {
    if (elem.nodeName.toLowerCase() == until || elem.className == until) {
      break;
    }
  }
  matched.push(elem);
}

}
return matched;
}

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)
})

你可能感兴趣的:(jQuery的遍历结构设计——同胞元素的遍历例子)