jquery源码解析之遍历同胞(下)-CSDN博客

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

通俗讲

.next() 获得自己同族的下一个同胞

.prev() 获得自己同族的上一个同胞

.siblings() 获得自己同族的所有同胞除了自己

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title></title>
</head>
<body>

<button id="test1">模拟遍历上一个节点</button>
<button id="test2">模拟遍历下一个节点</button>

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>


<script type="text/javascript">


function sibling(cur, dir) { //关键代码
  while ((cur = cur[dir]) && cur.nodeType !== 1) {}
  return cur;
}

function next(elem) {
  return sibling(elem, "nextSibling");
}

function prev(elem) {
  return sibling(elem, "previousSibling");
}


var thirdItem = document.querySelectorAll('.third-item')[0]



$("#test1").click(function(){
  var thirdItem = document.querySelectorAll('.third-item')[0]
  alert(prev(thirdItem).innerHTML)
})


$("#test2").click(function(){
  var thirdItem = document.querySelectorAll('.third-item')[0]
  alert(next(thirdItem).innerHTML)
})

</script> 

</body>
</html>