<!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>
