遍歷同胞(下)
.next() 獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素。
.prev() 獲得匹配元素集合中每個(gè)元素緊鄰的前一個(gè)同輩元素，由選擇器篩選（可選）。
.siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。
相鄰節(jié)點(diǎn)的處理是最簡(jiǎn)單的，在節(jié)點(diǎn)上調(diào)用nextSibling或者previousSibling，但是我們也要注意相同處理復(fù)用的問題：
Siblings的意思就是找到5個(gè)li中除去class="third-item"的其余4個(gè)，那么我們可以換個(gè)思路，可以通過class="third-item"父級(jí)ul的第一個(gè)子元素開始遍歷去篩選，排除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">模擬遍歷上一個(gè)節(jié)點(diǎn)</button>
<button id="test2">模擬遍歷下一個(gè)節(jié)點(diǎn)</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>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
