집 >웹 프론트엔드 >JS 튜토리얼 >jquery 순회 함수 siblings() 사용법 example_jquery

jquery 순회 함수 siblings() 사용법 example_jquery

WBOY원래의: 2016-05-16 15:23:381349검색

이 기사의 예에서는 jquery 순회 함수 siblings()의 사용법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

남매([expr])

일치하는 모든 요소 집합에서 각 요소의 모든 형제 요소 집합을 가져옵니다. 일치하는 요소의 컬렉션을 반환합니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
 <script src="jquery.js"></script>
 <script>
 $(document).ready(function(){
  var len = $(".hilite").siblings().css("color", "red").length;
  $("b").text(len);
 });
 </script>
 <style>
 ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
 p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
   font-weight:bolder; }
 .hilite { background:yellow; }
</style>
</head>
<body>
 <ul>
  <li>One</li>
  <li>Two</li>
  <li class="hilite">Three</li>
  <li>Four</li>
 </ul>
 <ul>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
 </ul>
 <ul>
  <li>Eight</li>
  <li class="hilite">Nine</li>
  <li>Ten</li>
  <li class="hilite">Eleven</li>
 </ul>
 <p>Unique siblings: <b></b></p>
</body>
</html>

코드 복사 코드는 다음과 같습니다.

$(".hilite").siblings()

은 특수 스타일 'hilite' 요소를 포함하는 모든 형제 요소 세트를 가져옵니다. 다음은 일치하는 요소의 집합입니다

<li>One</li>
<li>Two</li>
<li>Four</li>
<li>Eight</li>
<li class="hilite">Nine</li>
<li>Ten</li>
<li class="hilite">Eleven</li>

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：JS는 일부 HTML 고정 페이지_자바스크립트 기술 상단에 화면 스크롤 효과를 구현합니다.다음 기사：JS는 일부 HTML 고정 페이지_자바스크립트 기술 상단에 화면 스크롤 효과를 구현합니다.

jquery 순회 함수 siblings() 사용법 example_jquery

관련 기사