jquery siblings()는 선택한 요소의 모든 형제 요소를 가져오는 데 사용됩니다. DOM 요소의 형제 요소를 따라 앞뒤로 이동하고 동일한 상위 요소를 공유하는 모든 하위 요소를 반환합니다(선택한 요소 제외). "element object.siblings(filter)" 구문은 검색 범위를 좁히기 위해 해당 매개변수를 생략할 수 있습니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.
jquery siblings() 메서드는 선택한 요소의 모든 형제 요소를 가져오는 데 사용됩니다.
동위 요소는 동일한 상위 요소를 공유하는 요소입니다.
siblings() 메서드는 DOM 요소의 형제 요소를 따라 앞뒤로 이동하여 동일한 상위 요소를 공유하는 모든 하위 요소(선택한 요소 제외)를 반환합니다.
문법 형식:
$(selector).siblings(filter)
매개변수 | 설명 |
---|---|
filter | 선택 사항입니다. 형제 요소 검색 범위를 좁히는 선택기 표현식을 지정합니다. |
예 1: 클래스 이름이 "start"인 각
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("li.start").siblings().css({ "color": "red", "border": "2px solid red" }); }); </script> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> </head> <body> <div style="width:500px;" class="siblings"> <ul>ul (父节点) <li>li (类名为"star"的上一个兄弟节点)</li> <li>li (类名为"star"的上一个兄弟节点)</li> <li class="start">li (兄弟节点)</li> <li>li (类名为"star"的下一个兄弟节点)</li> <li>li (类名为"star"的下一个兄弟节点)</li> </ul> </div> <p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p> </body> </html>
예 2: 검색 범위를 좁힙니다(두 개의 매개 변수 사용). 비슷한 요소)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("li.start").siblings(".1").css({ "color": "red", "border": "2px solid red" }); }); </script> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> </head> <body> <div style="width:500px;" class="siblings"> <ul>ul(父节点) <li>li (类名为"star"的上一个兄弟节点)</li> <li class="1">li(类名为"star"的上一个兄弟节点)</li> <li class="start">li (兄弟节点)</li> <li>li(类名为"star"的下一个兄弟节点)</li> <li class="1">li (类名为"star"的下一个兄弟节点)</li> </ul> </div> <p>在这个例子中,我们缩小搜索结果只返回在类名为“star”和“stop”的li元素之间类名为“1”的兄弟元素。</p> </body> </html>
【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】
위 내용은 jquery siblings()의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!