jQuery를 사용한 두 번째 형제 요소의 스타일 변경과 클래스 추가

아래는 jQuery를 사용하여 두 번째 형제 요소(<span>)를 선택하고, 해당 요소 뒤에 새로운 내용을 추가하고 클래스를 추가하는 예제입니다.

$( "span:nth-of-type(2)" )
  .append( "<span> is 2nd sibling span</span>" )
  .addClass( "nth" );

설명:

1. $() 함수를 사용하여 jQuery 선택자를 지정합니다.
2. "span:nth-of-type(2)"는 문서 내의 두 번째 <span> 요소를 선택합니다.
3. append() 함수를 사용하여 선택된 두 번째 <span> 요소의 뒤에 새로운 내용인 <span> is 2nd sibling span</span>을 추가합니다.
4. addClass() 함수를 사용하여 선택된 두 번째 <span> 요소에 "nth" 클래스를 추가합니다.

예제 2: 다양한 형제 요소에 스타일 변경과 클래스 추가

$( "h2:nth-of-type(3)" )
  .css( "color", "blue" )
  .append( "<span> is 3rd sibling heading</span>" )
  .addClass( "highlight" );

설명:
이 예제는 문서 내의 세 번째 <h2> 요소를 선택하고, 해당 요소의 색상을 파란색으로 변경하고, 뒤에 새로운 내용을 추가하고, "highlight" 클래스를 추가합니다.

예제 3: 리스트의 두 번째 자식 요소에 스타일 변경과 클래스 추가

$( "ul li:nth-child(2)" )
  .css( "font-weight", "bold" )
  .append( "<span> is 2nd child of list</span>" )
  .addClass( "bold-text" );

설명:
이 예제는 문서 내의 목록(<ul>)의 두 번째 자식(<li>) 요소를 선택하고, 해당 요소의 글꼴을 굵게 변경하고, 뒤에 새로운 내용을 추가하고, "bold-text" 클래스를 추가합니다.