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

遍历同胞(下)

.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.siblings() 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。

相邻节点的处理是最简单的，在节点上调用nextSibling或者previousSibling，但是我们也要注意相同处理复用的问题：

Siblings的意思就是找到5个li中除去class="third-item"的其余4个，那么我们可以换个思路，可以通过class="third-item"父级ul的第一个子元素开始遍历去筛选，排除class="third-item"即可

任务

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://code.jquery.com/jquery-latest.js"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.  
  10. <button id="test1">模拟遍历上一个节点</button>
  11. <button id="test2">模拟遍历下一个节点</button>
  12.  
  13. <ul>
  14.   <li>list item 1</li>
  15.   <li>list item 2</li>
  16.   <li class="third-item">list item 3</li>
  17.   <li>list item 4</li>
  18.   <li>list item 5</li>
  19. </ul>
  20.  
  21.  
  22. <script type="text/javascript">
  23.  
  24.  
  25. function sibling(cur, dir) {
  26.   while ((cur = cur[dir]) && cur.nodeType !== 1) {}
  27.   return cur;
  28. }
  29.  
  30. function next(elem) {
  31.   return sibling(elem, "nextSibling");
  32. }
  33.  
  34. function prev(elem) {
  35.   return sibling(elem, "previousSibling");
  36. }
  37.  
  38.  
  39. var thirdItem = document.querySelectorAll('.third-item')[0]
  40.  
  41.  
  42.  
  43. $("#test1").click(function(){
  44.   var thirdItem = document.querySelectorAll('.third-item')[0]
  45.   alert(prev(thirdItem).innerHTML)
  46. })
  47.  
  48.  
  49. $("#test2").click(function(){
  50.   var thirdItem = document.querySelectorAll('.third-item')[0]
  51.   alert(next(thirdItem).innerHTML)
  52. })
  53.  
  54. </script> 
  55.  
  56. </body>
  57. </html>
下一节