022_遍历同胞
1. siblings()方法
1.1. siblings()方法返回被選元素的所有同胞元素(不包含自身)。該方法還可以使用一個可選的參數來過濾對同胞元素的搜索。
1.2. 語法
$(selector).siblings() $(selector).siblings(selector)1.3. 參數
1.4. 例子
1.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>siblings()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("h1").siblings().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("h1").siblings('p').css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors div{width: 500px; float: left;}.ancestors div, .ancestors div *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <div>div(父)<ul>ul元素</ul><p>p元素</p><h1>h1元素</h1> <span>span元素</span> </div><div>div(父)<ul>ul元素</ul><p>p元素</p><h1>h1元素</h1> <span>span元素</span></div><span style="display: block; clear: left;"><button id="btn1">所有同胞元素</button> <button id="btn2">所有同胞元素中過濾</button></span></body> </html>1.4.2. 效果圖
2. next()方法
2.1. next()方法返回被選元素的下一個同胞元素。該方法只返回一個元素。
2.2. next()方法接受可選的選擇器表達式, 類型與我傳遞到$()函數中的相同。如果緊跟的下一個同胞元素匹配該選擇器, 則會留在新構造的jQuery對象中; 否則會將之排除。
2.3. 語法
$(selector).next() $(selector).next(selector)2.4. 參數
2.5. 例子
2.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>next()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("h1").next().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("h1").next('.mySpan').css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors div{width: 500px; float: left;}.ancestors div, .ancestors div *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <div>div(父)<p>p元素</p><h1>h1元素</h1> <span>span元素</span> <ul>ul元素</ul></div><div>div(父)<p>p元素</p><h1>h1元素</h1> <span class="mySpan">span元素</span><ul>ul元素</ul></div><span style="display: block; clear: left;"><button id="btn1">下一個同胞元素</button> <button id="btn2">下一個同胞元素中過濾</button></span></body> </html>2.5.2. 效果圖
3. nextAll()方法
3.1. nextAll()方法獲得匹配元素集合中每個元素的所有跟隨的同胞元素。
3.2. nextAll()方法接受可選的選擇器表達式, 類型與我傳遞到$()函數中的相同。如果應用選擇器, 則將通過檢測元素是否匹配來對它們進行篩選。
3.3. 語法
$(selector).nextAll() $(selector).nextAll(selector)3.4. 參數
3.5. 例子
3.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>nextAll()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("h1").nextAll().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("h1").nextAll('.mySpan').css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors div{width: 500px; float: left;}.ancestors div, .ancestors div *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <div>div(父)<ul>ul元素</ul><h1>h1元素</h1> <p>p元素</p><span>span元素</span> </div><div>div(父)<ul>ul元素</ul><h1>h1元素</h1><p>p元素</p><span class="mySpan">span元素</span></div><span style="display: block; clear: left;"><button id="btn1">跟隨的所有同胞元素</button> <button id="btn2">跟隨的所有同胞元素中過濾</button></span></body> </html>3.5.2. 效果圖
4. nextUntil()方法
4.1. nextUntil()方法獲得每個元素所有跟隨的同胞元素, 是介于兩個給定元素之間的元素,?但不包括被選擇器、DOM節點或已傳遞的jQuery對象匹配的元素。
4.2. nextUntil()方法接受可選的選擇器表達式或對象作為第一個參數, 規定何處停止匹配, 如果所有跟隨的同胞元素不匹配該參數或未規定該參數, 則會選取所有跟隨的同胞與nextAll()方法相同。
4.3. nextUntil()方法接受可選的選擇器表達式作為第二參數。如果指定該參數, 則將通過檢測元素是否匹配該選擇器來篩選它們。
4.4. 語法 1
$(selector).nextUntil(selector,filter)4.5. 參數
4.6. 語法 2
$(selector).nextUntil(element,filter)4.7. 參數
4.8. 例子
4.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>nextUntil()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("h1").nextUntil().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("h1").nextUntil('ul').css({"color":"red","border":"2px solid red"});});$('#btn3').click(function(){$("h1").nextUntil(document.getElementsByTagName('ul')).css({"color":"red","border":"2px solid red"});});$('#btn4').click(function(){$("h1").nextUntil($('ul')).css({"color":"red","border":"2px solid red"});});$('#btn5').click(function(){$("h1").nextUntil('ul', '.mySpan').css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors div{width: 500px;float: left;}.ancestors div, .ancestors div *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <div>div(父)<h1>h1元素</h1> <p>p元素</p><span>span元素</span> <ul>ul元素</ul></div><div>div(父)<h1>h1元素</h1><p>p元素</p><span class="mySpan">span元素</span><ul>ul元素</ul></div><span style="display: block; clear: left;"><button id="btn1">h1跟隨的所有同胞元素</button> <button id="btn2">h1和ul之間h1所有的同胞元素(選擇器表達式)</button> <button id="btn3">h1和ul之間h1所有的同胞元素(DOM節點)</button> <button id="btn4">h1和ul之間h1所有的同胞元素(jQuery對象)</button><br /><br /><button id="btn5">h1和ul之間h1所有的同胞元素中過濾類是mySpan的元素</button></span></body> </html>4.8.2. 效果圖
5. prev()方法
5.1. prev()方法獲得匹配元素集合中每個元素緊鄰的前一個同胞元素, 該方法只返回一個元素。通過選擇器進行篩選是可選的。
5.2. 語法
$(selector).prev() $(selector).prev(selector)5.3. 參數
5.4. 例子
5.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>prev()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("h1").prev().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("h1").prev('.mySpan').css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors div{width: 500px; float: left;}.ancestors div, .ancestors div *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <div>div(父)<ul>ul元素</ul><p>p元素</p><span>span元素</span><h1>h1元素</h1> </div><div>div(父)<ul>ul元素</ul><p>p元素</p><span class="mySpan">span元素</span><h1>h1元素</h1> </div><span style="display: block; clear: left;"><button id="btn1">上一個同胞元素</button> <button id="btn2">上一個同胞元素中過濾</button></span></body> </html>5.4.2. 效果圖
6. prevAll()方法
6.1. prevAll()方法獲得當前匹配元素集合中每個元素的前面的所有同胞元素, 使用選擇器進行篩選是可選的。
6.2. 語法
$(selector).prevAll() $(selector).prevAll(selector)6.3. 參數
6.4. 例子
6.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>prevAll()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("h1").prevAll().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("h1").prevAll('.mySpan').css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors div{width: 500px; float: left;}.ancestors div, .ancestors div *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <div>div(父)<ul>ul元素</ul><span>span元素</span> <h1>h1元素</h1> <p>p元素</p></div><div>div(父)<ul>ul元素</ul><span class="mySpan">span元素</span><h1>h1元素</h1><p>p元素</p></div><span style="display: block; clear: left;"><button id="btn1">前面的所有同胞元素</button> <button id="btn2">前面的所有同胞元素中過濾</button></span></body> </html>6.4.2. 效果圖
7. prevUntil()方法
7.1. prevUntil()方法獲得當前匹配元素集合中每個元素的前面的同胞元素, 是介于兩個給定元素之間的元素,?但不包括被選擇器、DOM節點或jQuery對象匹配的元素。
7.2. prevUntil()方法如果不匹配或未應用選擇器參數, 該方法選取的元素與prevAll()相同。
7.3. prevUntil()方法接受可選的選擇器表達式作為其第二參數。如果應用這個參數, 則將通過檢測元素是否匹配該選擇器對元素進行篩選。
7.4. 語法 1
$(selector).prevUntil(selector, filter)7.5. 參數
7.6. 語法 2
$(selector).prevUntil(element, filter)7.7. 參數
7.8. 例子
7.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>prevUntil()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("h1").prevUntil().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("h1").prevUntil('ul').css({"color":"red","border":"2px solid red"});});$('#btn3').click(function(){$("h1").prevUntil(document.getElementsByTagName('ul')).css({"color":"red","border":"2px solid red"});});$('#btn4').click(function(){$("h1").prevUntil($('ul')).css({"color":"red","border":"2px solid red"});});$('#btn5').click(function(){$("h1").prevUntil('ul', '.mySpan').css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors div{width: 500px;float: left;}.ancestors div, .ancestors div *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <div>div(父)<ul>ul元素</ul><span>span元素</span> <p>p元素</p><h1>h1元素</h1></div><div>div(父)<ul>ul元素</ul><span class="mySpan">span元素</span><p>p元素</p><h1>h1元素</h1></div><span style="display: block; clear: left;"><button id="btn1">h1前面的所有同胞元素</button> <button id="btn2">h1和ul之間h1前面所有的同胞元素(選擇器表達式)</button> <button id="btn3">h1和ul之間h1前面所有的同胞元素(DOM節點)</button> <button id="btn4">h1和ul之間h1前面所有的同胞元素(jQuery對象)</button><br /><br /><button id="btn5">h1和ul之間h1前面所有的同胞元素中過濾類是mySpan的元素</button></span></body> </html>7.8.2. 效果圖
總結
