1-4 遍历同胞(上)
本节编程练习不计算学习进度，请电脑登录imooc.com操作

遍历同胞(上)

同胞就是拥有相同的父元素。

通过jQuery能够在DOM树中遍历元素的同胞元素。

其中nextAll、prevAll、nextUntil、prevUntil其实与遍历祖先的的查找处理是非常类似。

.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil() 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。

我们通过右边的代码模拟下这些处理。事实上jQuery也是这样处理的，只是在结构与过滤处理上更加的严谨。

 

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script>
  6. <!-- <script type="text/javascript" src="../jquery-2.1.1.js"></script> -->
  7. <title></title>
  8. </head>
  9. <body>
  10.  
  11. <button id="test1">jQuery遍历同胞</button>
  12. <button id="test2">模拟遍历同胞</button>
  13.  
  14. <ul class="level-1">
  15.   <li class="item-i">I</li>
  16.   <li class="item-ii">II
  17.     <ul class="level-2">
  18.       <li class="item-a">A</li>
  19.       <li class="item-b">B
  20.         <ul class="level-3">
  21.           <li class="item-1">1</li>
  22.           <li class="item-2">2</li>
  23.           <li class="item-3">3</li>
  24.         </ul>
  25.       </li>
  26.       <li class="item-c">C</li>
  27.     </ul>
  28.   </li>
  29.   <li class="item-iii">III</li>
  30. </ul>
  31.  
  32.  
  33.  
  34. <script type="text/javascript">
  35.  
  36.  
  37. function dir(elem, dir, until) {
  38.   var matched = [],
  39.     truncate = until !== undefined;
  40.   while ((elem = elem[dir]) && elem.nodeType !== 9) {
  41.     if (elem.nodeType === 1) {
  42.       if (truncate) {
  43.         if (elem.nodeName.toLowerCase() == until || elem.className == until) {
  44.           break;
  45.         }
  46.       }
  47.       matched.push(elem);
  48.     }
  49.   }
  50.   return matched;
  51. }
  52.  
  53.  
  54. function nextAll(elem) {
  55.   return dir(elem, "nextSibling");
  56. }
  57.  
  58. function prevAll(elem) {
  59.   return dir(elem, "previousSibling");
  60. }
  61.  
  62. function nextUntil(elem, until) {
  63.   return dir(elem, "nextSibling", until);
  64. }
  65.  
  66. function prevUntil(elem, until) {
  67.   return dir(elem, "previousSibling", until);
  68. }
  69.  
  70.  
  71. $("#test1").click(function(){
  72.   var item = $('li.item-ii');
  73.   alert(item.nextAll()[0].className)
  74.   alert(item.prevAll()[0].className)
  75.   alert(item.nextUntil('.end')[0].className)
  76.   alert(item.prevUntil('.first')[0].className)
  77. })
  78.  
  79. $("#test2").click(function(){
  80.   var item = document.querySelectorAll('li.item-ii')[0]
  81.   alert(nextAll(item)[0].className)
  82.   alert(prevAll(item)[0].className)
  83.   alert(nextUntil(item, '.end')[0].className)
  84.   alert(prevUntil(item, '.first')[0].className)
  85. })
  86.  
  87.  
  88.  
  89. </script> 
  90.  
  91. </body>
  92. </html>
下一节